vue中，对象数组多层嵌套时，更新数据更新页面

vue中的对象和数组的元素直接赋值修改时，是不能响应到view中去的

一、对象更新

this.a={title:'列表1’};
this.a.title='列表2’;

<h1>{{a.title}}</h1>

虽然，a的数据已经被修改为功，可是页面并不能动态更新

须要使用，如下这种方式去更新

this.$set(a,'title','列表2'); //或者
Vue.set(a,'title','列表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);

三、数组对象的组合更新

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);

 复杂的嵌套逻辑时，若是想要跟新某个值，必定要先选择到该层级后，再使用以上方式进行修改