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