vue-数组或对象更新了,但视图不更新的解决方案

大多时候我们习惯直接给对象的属性赋值,如:

 data() { // data数据
        return {
          arr: [1,2,3],
          obj:{
              a: 1,
              b: 2
          }
        };
      },

   // 数据更新 数组视图不更新
    this.arr[0] = 'OBKoro1';
    this.arr.length = 1;
    console.log(arr);// ['OBKoro1'];

    // 数据更新 对象视图不更新
    this.obj.c = 'OBKoro1';
    delete this.obj.a;
    console.log(obj);  // {b:2,c:'OBKoro1'}

  这种操作方式会使得视图无法实时更新,因为vue无法检测到数组或对象的更改或删除。

解决方法:

直接赋值改为用this.$set():

this.$set(this.obj, '属性名', value)

这样视图就能同步更新了。

posted on 2019-08-06 10:48  Ashe蓝  阅读(425)  评论(0编辑  收藏  举报