如何对对象数组进行v-建模

Question

我有一个对象数组，这是不确定的数组，可以在此处推送或拼接对象。我需要使用vue将对象的属性绑定到输入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

您可以使用index来做到这一点。例如：

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

另一种方法，我建议您使用事件，例如v-on:input或简单地使用@input输入一个调用方法，该方法可以在您的items中找到您要更改您的prop2值。

   <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
     }
   ...