vue2.0 操作数组下标不跟新ui,使用set()或$forceUpdate 也不能跟新视图情况

时间:2023-03-10 01:33:52
vue2.0 操作数组下标不跟新ui,使用set()或$forceUpdate 也不能跟新视图情况

 在vue 2.0 中操作数组不跟新ui图,即使使用set()或 $forceUpdate也不能跟新视图,我在前段时间也遇到了一个问题,当时我使用的时element 的tree 组件

由于需要对tree 的数组进行增删改查等操作,开始使用set操作数组时没什么问题的,但是,tree 的数组还需要整体更换第二次第三次数据,这时ui图就跟新了,想了很久想到了自己伪造一次$forceUpdate方法,代码如下

    forceUpdate() {
// 除去第一个分类,其它分类内容不更新的hack方法
let temp = this.data //这里的data 就是tree 使用的数组,将data 数据clone 一份
this.data = [] //先将data 数组置为空
this.$nextTick(() => {
this.data = temp //等dom 更新后再将data 数组重新赋值原来的数据
this.$nextTick(() => {
this.addFileClass() //这里的是我添加了一些类在上面,可以不用管这行代码
})
})
},

  在需要更新ui 的地方 调用 forceUpdate()这个方法就能实现伪造$forceUpdate 方法了,ui图也跟新了