data中数据,都是响应式。也就是说,如果操作data中的数据,视图会实时更新;
但在实际开发中,遇到过一个坑:若data中数据类型较为复杂,方法methods中改变对象的属性,而页面并不会改变
原因是vue监听不到数据类型特别复杂的属性。
可以使用this.$set()来进行强制更新,进而解决问题
一。对象操作:
三个参数:this.$set("需要改变的对象","需要改变的对象属性","值")
定义数据对象:
obj: { name: "小明", age: 18, },
1.对象的修改
this.$set(this.obj, "name", "小刘"); 控制台输出:obj: { name: "小刘", age: 18, },
2.对象的新增
this.$set(this.obj, "hobby", "study"); 控制台输出:obj: { name: "小明", age: 18, hobby: "study"},
二。数组操作:
三个参数:this.$set("数组","下标","值")
定义数组包对象:
arr: [
{ name: "小王", age: 18 },
{ name: "小张", age: 20 },
],
定义普通数组:
twoArr: [11, 22, 33, ],
1.数组的修改
修改数组对象: this.$set(this.arr, 1, { name: "小王", age: 19 }); 控制台输出:arr: [ { name: "小王", age: 18 },{ name: "小王", age: 19 }, ],
修改普通数组:
this.$set(this.twoArr, 0, 99);
控制台输出:twoArr: [99, 22, 33, ],
2.数组新增
(1)首先需要获取新增的数组长度:
let reslg = this.arr.length;
(2)然后添加在数组末尾:
this.$set(this.arr, reslg,{ name: "小紫", age: 18 },); 控制台输出: arr: [ { name: "小王", age: 18 }, { name: "小张", age: 20 }, { name: "小紫", age: 18 }, ],
三、同理,执行删除操作时,对象或数组不更新时可以使用this.$delete
基本语法: this.$delete(this.obj, "name")
标签:arr,vue,name,18,age,set,数组,使用 From: https://www.cnblogs.com/anna001/p/17881858.html