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