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

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