往響應(yīng)式對(duì)象this.$data中添加一個(gè)屬性阿逃,并確保這個(gè)新屬性同樣是響應(yīng)式的铭拧,且觸發(fā)視圖更新。它必須用于向響應(yīng)式對(duì)象上添加新屬性恃锉,因?yàn)?Vue 無(wú)法探測(cè)普通的新增屬性 .
data () {
return {
user: {
name: '',
id: ''
}
}
}
如果直接給user增加屬性
this.user.age = 30
雖然user的屬性值age的值為30搀菩,但是頁(yè)面上的視圖是不發(fā)生任何刷新的,只能展示name/id的值破托,age值還是為空肪跋。
原因:由于Vue.js 不能檢測(cè)到對(duì)象屬性的添加或刪除。因?yàn)?Vue.js 在初始化實(shí)例時(shí)將屬性轉(zhuǎn)為 getter/setter土砂,所以屬性必須在 data 對(duì)象上才能讓 Vue.js 轉(zhuǎn)換它州既,才能讓它是響應(yīng)的。
此時(shí)要解決上述問(wèn)題萝映,給對(duì)象添加屬性的時(shí)候吴叶,頁(yè)面視圖跟著刷新,可以用set的方法:
this.$set(this.user, "age", 30)
我在項(xiàng)目中遇到問(wèn)題是數(shù)組的每一項(xiàng)都要?jiǎng)討B(tài)添加響應(yīng)式屬性序臂,我這樣寫(xiě)也是有效果的:
for (let plan of this.formPayment.planList) {
this.$set(plan, 'socialInsuranceRanges', [{value: '1', label: '有', code: '', price: ''}, {value: '2', label: '無(wú)', code: '', price: ''}]);
}
還有一種情況是給已有對(duì)象添加多個(gè)屬性蚌卤,可能會(huì)用到Object.assgin(),這種情況,應(yīng)該用兩個(gè)對(duì)象創(chuàng)建一個(gè)新對(duì)象
不要這樣寫(xiě):
Object.assign( this.user, {
tel: 18888888888,
sex: 'Y'
})
而應(yīng)該這樣寫(xiě):
this.user = Object.assign( {}, this.user, {
tel: 18888888888,
sex: 'Y'
})