大多时候我们习惯直接给对象的属性赋值,如:
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)
这样视图就能同步更新了。