Vue.js：v-forのオブジェクトを使用した双方向データバインディング

Question

入力データをオブジェクトプロパティにバインドする際に問題があります。その属性から入力フィールドを生成するオブジェクトを反復処理していますが、データバインディングはv-modelを使用しても機能しません。ここに私のコードです（コンソールログは空のまま）：

<div id="app"> 
<div v-for='value, key in fields'> 
    {{ key }}: <input v-model='value'> 
</div> 
<button @click="add">Add</button> 
</div> 

<script> 

new Vue({ 
el: '#app', 
data: { 
    fields: { 
     id: 123, 
     name: 'abc' 
    } 
}, 
methods: { 
    add: function(){ 
      console.log('id: ' + this.fields.id) 
      console.log('name: ' + this.fields.name) 
    } 
} 
}) 

</script> 

Answer 1

あなたはvalueが動作しませんように、V-モデルでfields[key]を使用する必要があります、それはv-forのローカル変数です。

<div id="app"> 
    <div v-for='(value, key) in fields'> 
    {{ key }}: <input v-model="fields[key]"> 
    </div> 
    <button @click="add">Add</button> 
</div> 

作業デモhereを参照してください。