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