怎样让vue绑定从服务器拿到的动态字段

Question

现在有一个需求，要在前端设计一个模板，模板可以保存指定的字段，在前端渲染时，先取到模板的字段名，然后再和请求到的数据绑定，请问要怎样做呢？

<template>

<ul>
    <li v-for="filedName in filedNameFromServer">{{filedName}}</li>
</ul>
//我希望编译后的效果如下
<ul>
    <li>value1</li>
    <li>value2</li>
    <li>value3</li>
</ul>

</template>

<script>

module.exports = {
    data: function () {
        return {
            filedNameFromServer: ['{{filed1}}', '{{filed2}}','{{filed3}}'],
            dataFromServer: {
                filed1: 'value1',
                filed2: 'value2',
                filed3: 'value3'
            }
        }
    },
    methods: {

    }
}

</script>

Answer 1

我想用 filter 应该可以

<ul>
    <li v-for="filedName in filedNameFromServer">{{filedName | fromServer}}</li>
</ul>   


module.exports = {
    data: function () {
        return {
            filedNameFromServer: ['{{dataFromServer.filed1}}', '{{dataFromServer.filed2}}','{{dataFromServer.filed3}}'],
            dataFromServer: {
                filed1: 'value1',
                filed2: 'value2',
                filed3: 'value3'
            }
        }
    },
    filters: {
        fromServer: function(v) {
            return this.$interpolate(v);
        }
    }
}    

`

参考链接