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','全部展开');
   }

`
这样我们再进行对其中的对象进行操作的话,视图也会随之而改变:

原文地址:https://www.cnblogs.com/songkaikai/p/14144194.html