在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图也跟新了