Vueテンプレートへのデータの受け渡し

Question

私はかなり新しいvueであり、テンプレート内にデータ値を追加する方法を理解できません。私は非常に基本的なフォームビルダーを構築しようとしています。ボタンをクリックすると、コンポーネント変数に別のデータ配列が追加されます。これは機能しています。私は入力フィールドを追加するために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); 
     } 
    } 
}) 

私はちょうど何かを明らかに不足しています知っているように私には、任意の助けに感謝。コンポーネントにデータを渡す

Answer 1

使用props

おかげ。

現在のところ、<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> 

Here is a fork of your fiddle変化に。