vue給物件新增新屬性,檢視不會更新的問題
阿新 • • 發佈:2020-12-16
若現在我們有一個新的物件陣列:
`
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','全部展開');
}
`
這樣我們再進行對其中的物件進行操作的話,檢視也會隨之而改變: