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

 複雜的嵌套邏輯時，若是想要跟新某個值，必定要先選擇到該層級後，再使用以上方式進行修改