VUE数组，对象修改，视图也同步更新的几种方法

您所在的位置：网站首页 › vue数组删除对象 › VUE数组，对象修改，视图也同步更新的几种方法

VUE数组，对象修改，视图也同步更新的几种方法

2023-07-29 14:45| 来源: 网络整理| 查看: 265

BG：有时候会遇到，数组确实修改了，但是视图却没有更新的情况。

解决：

方案一：改变数组的指向，赋值为新数组

this.array = this.array.filter(...) this.array = this.array.concat(...)

方案二：利用数组的变异方法，更新数组，视图同步更新

push() pop() shift() unshift() splice() sort() reverse()

方案三：vue的set方法

数组修改

Vue.set(array, indexOfItem, newValue) this.array.$set(indexOfItem, newValue)

对象修改

Vue.set(obj, keyOfItem, newValue) this.obj.$set(keyOfItem, newValue)

方案四：用Object.assign或lodash.assign可以为对象添加响应式属性，可以触发视图更新

//Object.assign的单层的覆盖前面的属性，不会递归的合并属性 this.obj = Object.assign({},this.obj,{a:1, b:2}) //assign与Object.assign一样 this.obj = _.assign({},this.obj,{a:1, b:2}) //merge会递归的合并属性 this.obj = _.merge({},this.obj,{a:1, b:2})

【本文地址】

VUE数组，对象修改，视图也同步更新的几种方法

VUE数组，对象修改，视图也同步更新的几种方法

今日新闻

推荐新闻