vue 綁定數組裏面對象變化沒法更新view

html

 <div v-for="(content, index) in contents" @click="chnageVal(index)">
            <p>{{content.name}}</p>
            <div v-for="val in content.values">
                <p>val.type</p>
                <p>val.text</p>
            </div>
        </div>

js數據綁定

contents:[{
            name:"test1",
            values:[{
                text:"test11",
                type:"string"
            },{
                text:11,
                type:"number"
            }]
        },{
        name:"test2",
        values:[{
            text:"test21",
            type:"string"
        },{
            text:121,
            type:"number"
        }]
}]　

　改變數據方法　

changeVal:function(index){
            this.contents[index].name="change"
        }

理論上說，當這個方法觸發時，視圖內容應該也會對應的發生改變。其實是方法執行時視圖沒有響應，但數據發生了改變。

vue是經過檢測get,set才得知數據是否更新的，而對於數組來講，是沒有get，set方法的，因此須要咱們本身手動觸發，須要發送消息通知vue

下面是改後的方法

 changeVal:function(index){
            this.contents[index].name="change";
        Vue.set(this.contents, index, this.contents[index]);
        }

set方法具體點擊  https://cn.vuejs.org/v2/api/#Vue-set