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-model 一起使用，因为 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。

Vue.js: 使用带有 v-for 的对象进行双向数据绑定

Vue.js: two-way data binding using object with v-for

javascript

vue.js

v-for