javascript - 如何使用 vuejs 绑定(bind)来自服务器的动态字段

标签 javascript vue.js vue-resource vue-component

文件是服务器发送的,数据也是服务器发送的,如何用vuejs绑定(bind)呢?我最后想显示的是数据,而不是filedName。

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

        }
    }
</script>
<template>
    <ul>
        <li v-for="filedName in filedNameFromServer">{{filedName}}</li>
    </ul>
    //which I want after compile
    <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>

HTML:

<template>
    <ul>
        <li v-for="filedName in filedNameFromServer">
          {{ dataFromServer[filedName] }}
        </li>
    </ul>
    //which I want after compile
    <ul>
        <li>value1</li>
        <li>value2</li>
        <li>value3</li>
    </ul>
</template>

PS:filed应该是field,还是您的数据实际上是关于文件/归档的?

关于javascript - 如何使用 vuejs 绑定(bind)来自服务器的动态字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37563938/

相关文章:

在递归结束之前,Javascript 不会更改递归函数内部的 CSS

javascript - 模板文字中的换行符和字符串文字中的 '\' 之间有什么区别?

javascript - js中如何将对象转换为数组

javascript - Select2 和 Vue 指令

javascript - 基本 vue.js 2 和 vue-resource http get 变量赋值

javascript - API服务返回200,但实际上是404

javascript - 为什么这个 JavaScript 在成功将输入值复制到元素文本后删除所有内容

vue.js - 在 Vuejs 中,如何在默认路由器 View 之外呈现组件

javascript - 如何在 vue.js 2 上循环模板标签?

vue.js - 无法在SSR上渲染Vue应用