1. 程式人生 > 實用技巧 >vue給物件新增新屬性,檢視不會更新的問題

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

`
這樣我們再進行對其中的物件進行操作的話,檢視也會隨之而改變: