vue jsを使用して複数の入力フィールドリピータを作成するにはどうすればよいですか？

Question

は私がVUE JS サンプル出力を使用して複数の名前を追加するために、動的フォームフィールドを作成したい - >https://prnt.sc/h6y0pf

はここにここに私のvuejsです私のhtml

<div id="app"> 
    <h1>Vue JS Multiple Fields Repeater</h1> 
    <div class="border" v-for="field in field1"> 
    <input v-model="field.value" placeholder="Enter First Name"> 
    <input v-model="field2.value" placeholder="Enter Last Name"> 
    </div> 
    <button @click="AddField"> 
    New Field 
    </button> 
    <pre>{{ $data | json }}</pre> 
</div> 

だ

new Vue({ 
    el: '#app', 
    data: { 
    field1: [] , 
    field2: [] 
    }, 
    created: function() { 
     this.field1.push({ value: '' }); 
     this.field2.push({ value: '' }); 
    }, 
    methods: { 
    AddField: function() { 
     this.field1.push({ value: '' }); 
     this.field2.push({ value: '' }); 
    } 
    } 
}); 

私はしましたここにjsfiddleを作成しました - >https://jsfiddle.net/0e3csn5y/2/

問題は私は新しいフィールドを追加するたびにファーストネームを入力することができます。どのように私はまた姓フィールドにそれを行うことができますか？どうやってここで微妙なことをすることができますか？

Answer 1

あなたの現在の試行では、両方の入力を同じオブジェクトにバインドするのが難しくなります。このようにしてfirst-nameとlast-nameを正しくバインドします。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    fields: [{ first: '',last: '' }], 
 
    }, 
 
    created: function() { 
 
    }, 
 
    methods: { 
 
    AddField: function() { 
 
     this.fields.push({ first: '',last: '' }); 
 
    } 
 
    } 
 
});

.border { 
 
    border: 1px solid black; 
 
    padding: 3px; 
 
    margin-bottom: 5px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.14/vue.js"></script> 
 
<div id="app"> 
 
    <h1>Vue JS Multiple Fields Repeater</h1> 
 
    <div class="border" v-for="field in fields"> 
 
    <input v-model="field.first" placeholder="Enter First Name"> 
 
    <input v-model="field.last" placeholder="Enter Last Name"> 
 
    </div> 
 
    <button @click="AddField"> 
 
    New Field 
 
    </button> 
 
    <pre>{{ $data | json }}</pre> 
 
</div>

Answer 2

あなたはこれで問題を抱えている理由は、JavaScriptののいくつかの制限であり、その反応性に影響を与えます。

私は、理想的な解決策として、他の回答に同意します。ただし、2つの配列を使用する場合はもう1つのオプションがあります。

重要な部分：長さ

v-for="i in field1.length"この意志ループ0

は次にthis.field1.push('')を使用して設定し、オブジェクトの値の使用を削除して使用して取得field1[i]

https://jsfiddle.net/0e3csn5y/4/

HTML：

<div id="app"> 
    <h1>Vue JS Multiple Fields Repeater</h1> 
    <div class="border" v-for="i in field1.length"> 
    <input v-model="field1[i]" placeholder="Enter First Name"> 
    <input v-model="field2[i]" placeholder="Enter Last Name"> 
    </div> 
    <button @click="AddField"> 
    New Field 
    </button> 
    <pre>{{ $data | json }}</pre> 
</div> 

の

JS：

new Vue({ 
    el: '#app', 
    data: { 
    field1: [] , 
    field2: [] 
    }, 
    created: function() { 
     this.field1.push(''); 
     this.field2.push(''); 
    }, 
    methods: { 
    AddField: function() { 
     this.field1.push(''); 
     this.field2.push(''); 
    } 
    } 
});