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

你将不得不使用fields[key]与V-模型为value将在那里工作，这是一个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。