vue给对象添加新属性,视图不会更新的问题
若现在我们有一个新的对象数组:
`
var peoples = [{name:'小明',age:1,sex:'男'},{name:'小红',age:2,sex:'女'},{name:'小绿',age:3,sex:'男'},{name:'小黄',age:4,sex:'女'}]
`
我们给每一个对象添加一个属性:
`
var vm = this;
for(var i=0;i<peoples.length;i++){
vm.peoples[i].operation="全部展开";
}
`
那么每一个对象中就会多一个属性:
`
{name:'小明',age:1,sex:'男',operation:'全部展开'}......
`
但是我们要是对对象进行操作的话,如:
`
<div v-for="(item,index) in peoples">
<div v-if="item.operation=='全部展开'" @click="changgeO(item.operation,index)">{{item}}<div>
<div v-else-if="item.operation=='全部关闭'"></div>
</div>
methods:{
changgeO:function(text,index){
if(text=="全部展开"){
peoples[index].operation="全部关闭";
}
}
}
`
虽然上述代码表面上看起来没有什么错误,但是,执行起来的话,视图并不会更新,也就是说
{{item}}中的值依然是:{name:'小明',age:1,sex:'男',operation:'全部展开'}而不是我们期望的{name:'小明',age:1,sex:'男',operation:'全部关闭'}
所以,我们要用vue的方式给对象赋值:
`
var vm = this;
for(var i=0;i<peoples.length;i++){
vm.$set(peoples[i],'operation','全部展开');
}
`
这样我们再进行对其中的对象进行操作的话,视图也会随之而改变: