对象和数组的数据更新和设置
vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的
1、对象更新
this.a={title:'姓名1’};
this.a.title='姓名2’;
<h1>{{a.title}}</h1>
虽然,a的数据已经被修改成功,但是页面并不能动态更新
需要使用,以下这种方式去更新
对象只有title属性,通过$set给对象添加属性(三个参数,对象名,属性名, 属性)
this.$set(a,'title','姓名2');
//或者
Vue.set(a,'title','姓名2');
2、数组更新
同理:
this.arr=[1,2,3,4];
tihs.arr[0]=9;
<span v-for="value in arr">{{value}}</span>
//1 2 3 4
以上方式虽然改变了变量中的值,同样不能响应到view 中
Vue.set(arr,索引值,value);
//或者
arr.splice(索引值,元素数目,value);
3、数组对象的组合更新
this.arr=[{
key:'key1',
value:[]
},{
key:'key2',
value:[]
}];
例如,想要将arr[0].value重新赋一个数组,可以使用
this.arr[0].value.splice(0, 1, ...newArr);
//或者
this.$set(this.arr[0], "value", newArr);
复杂的嵌套逻辑时,如果想要更新某个值,一定要先选择到该层级后,再使用以上方式进行修改