vue.js - 如何对对象数组进行 v-model

Question

我有对象数组，这是不定数组，可以在这里推送或拼接东西。我需要使用 vue 将对象的属性绑定(bind)到输入 dom，似乎不起作用。

这是数据

   items : [
     { prop1: 123, prop2: 'test', prop3: 'foo' },
     { prop1: 321, prop2: 'tset', prop3: 'bar' },
   ]

}

试图做

   <li v-for="item in items"> 
      {{ item.prop2 }} 
      <input type="text" v-model="item.prop1">
   </li>

</ul>

Answer 1

你可以使用索引来做到这一点。例如:

   <li v-for="(item, index) of items"> 
      {{ item.prop2 }} 
      <input type="text" v-model="items[index].prop2">
   </li>

我推荐的另一种方法是使用事件，例如 v-on:input或者干脆@input在你输入一个调用方法，在你的 items 中找到你的项目更改您的prop2值(value)。

   <li v-for="(item, index) of items"> 
      {{ item.prop2 }} 
      <input type="text" @input="updateMyProp(index)">
   </li>

   ...
   methods: {
     updateMyProp ($event, index) {
       // your update logic here
       // you can use 'this.items', Object.assign, Vue.set, etc... to update your value
     }
   ...