在 Vue 2 中,直接修改数组的某个项可能不会触发视图的更新。这是因为 Vue 不能检测到数组的索引变化或对象属性的直接赋值。为了确保 Vue 能够正确地响应数据变化,你可以使用以下几种方法:
1. 使用 Vue.set()
使用 Vue.set()
方法可以确保 Vue 能够检测到数组或对象的变化并重新渲染视图。你的代码可以修改为:
案例场景:在子组件中修改数据后,通过子组件的this.$emit触发父组件中,给子组件绑定的自定事件对应的函数updateList,其中obj通过子组件传递过来
updateList(obj) {
let index = this.list.findIndex(item => parseInt(item.id) === parseInt(obj.id));
if (index !== -1) {
// 使用 Vue.set() 更新数组中的项
this.$set(this.list, index, obj);
}
}
2. 使用 splice()
方法
你也可以使用 splice()
方法来替换数组中的项,这样 Vue 会检测到变化:
updateList(obj) {
let index = this.list.findIndex(item => parseInt(item.id) === parseInt(obj.id));
if (index !== -1) {
// 使用 splice() 替换项
this.list.splice(index, 1, obj);
}
}
3. 创建一个新数组
另外一种方法是创建一个新的数组并替换旧数组,这样 Vue 也会检测到变化:
updateList(obj) {
this.list = this.list.map(item => {
return parseInt(item.id) === parseInt(obj.id) ? obj : item;
});
}
总结
使用 Vue.set()
或 splice()
是最常见的做法,可以确保 Vue 的响应式系统正确工作,及时更新视图。选择适合你需求的方法即可。