场景:vue中父组件数组包对象,传给子组件对象,子组件修改属性(字段)后,父组件没有更新
代码:
# 父组件
<div v-for="(object, name, index) in arr" :key="index">
<子组件 v-model="object" />
</div>
假设:object={age:80, name: '张三'}
子组件修改 age属性值为 20,此时父组件是不会改变的,重启项目有可能还会报一下错误
You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an object
解决如下:
# 父组件
<div v-for="(object, name, index) in arr" :key="index">
<子组件 v-model="arr[index]" />
</div>
解析:区别在于 v-model="object" 变成了 v-model="arr[index]"