将数据传递到Vue模板

Chris 发表于 Dev

克里斯

我对vue相当陌生，无法弄清楚如何在模板中添加数据值。我正在尝试构建一个非常基本的表单生成器。如果单击按钮，则应该将另一个数据数组添加到components变量中。这正在工作。我正在做一个v-for来添加输入字段，其中某些属性是该组件数组的一部分。我明白了，所以它将添加输入，但是没有值传递到输入中。

我创建了一个jsfiddle，并停留在其中。https://jsfiddle.net/a9koj9gv/2/

<div id="app">
    <button @click="add_text_input">New Text Input Field</button>
    <my-component v-for="comp in components"></my-component>
    <pre>{{ $data | json }}</pre>
</div>

new Vue({
    el: "#app",

    data: function() {
        return {
            components: [{
                    name: "first_name",
                    showname: "First Name",
                    type: "text",
                    required: "false",
                    fee: "0"
                  }]
            }
    },

    components: {
        'my-component': {
            template: '<div>{{ showname }}: <input v-bind:name="name" v-bind:type="type"></div>',
            props: ['showname', 'type', 'name']
        }

    },

    methods: {
        add_text_input: function() {
            var array = {
                    name: "last_name",
                    showname: "Last Name",
                    type: "text",
                    required: "false",
                    fee: "0"
                  };
            this.components.push(array);
        }
    }
})

感谢您提供的任何帮助，因为我知道我只是缺少一些明显的东西。

谢谢

他们好美

使用道具将数据传递到组件中。

当前您有<my-component v-for="comp in components"></my-component>，它不会将任何道具绑定到组件。

相反，请执行以下操作：

<my-component :showname="comp.showname" 
              :type="comp.type" 
              :name="comp.name" 
              v-for="comp in components"
></my-component>

这是您为零钱而摆弄的叉子。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。