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的对象进行双向数据绑定

1 个答案: