【问题标题】：how to v-model for array of objects如何对对象数组进行 v-model
【发布时间】：2020-03-02 10:30:22
【问题描述】：

我有对象数组，这是不定数组，可以在这里推送或拼接东西。我需要用 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>

【问题讨论】：

标签： vue.js

【解决方案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 值.

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

【讨论】：

有时，更新数据上的某些数组项不会直接更新 DOM，您必须强制 Vue 执行此操作。喜欢stackoverflow.com/questions/39794632/…
谢谢，如果你添加像 data[index].prop = value 这样的属性，看起来 Vue 不会检测到对象数组的变化我做了 $this.set(item, 'prop', value) 并且它工作了 vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
迟到的评论，但它可能对偶然发现它的人仍然有用：记得设置你的组件键！ <input type="text" v-model="items[index].prop2" :key='items[index].unique_prop'> NOT <input type="text" v-model="items[index].prop2" :key='item.unique_prop'> 我体验到后者不适用于 v-autocomplete 组件上的项目槽。可能还有其他人。
不应该 @input="updateMyProp(index) 是 @input="updateMyProp($event, index)？