解决vue2中更新列表数据，页面dom没有重新渲染的问题

在 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 的响应式系统正确工作，及时更新视图。选择适合你需求的方法即可。

原文地址：https://blog.csdn.net/weixin_52584863/article/details/144421108

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！