出現(xiàn)的問題
在data中定義了groups對象氏涩，其中每一個(gè)屬性雙向綁定一個(gè)下拉框有梆，來確定選中的值，它的內(nèi)容是從是從后臺獲取的饺汹。
如果直接通過賦值痰催，那么網(wǎng)頁上的下拉框是無法選中的
代碼中定義
data() {
return {
groups: {},
}
}
直接賦值
async fetchData() {
let resp = await axios.get("/category");
this.groups['a下拉框'] = resp.data['a下拉框'];
this.groups['b下拉框'] = resp.data['b下拉框'];
},
經(jīng)過動態(tài)加載后應(yīng)該這樣
groups: {
'a下拉框': 1,
'b下拉框': 1,
},
雖然groups中已經(jīng)有了數(shù)據(jù)夸溶，但是下拉框并不能點(diǎn)擊，說明我們的雙向綁定出了問題
解決方案
原因
因?yàn)?Vue 無法探測普通的新增屬性缝裁。在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上，它不會觸發(fā)視圖更新韩脑。Vue 會在初始化實(shí)例時(shí)對屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程粹污，所以屬性必須在 data 對象上存在才能讓 Vue 轉(zhuǎn)換它，這樣才能讓它是響應(yīng)的进苍。
通過Vue.$set() 解決
Vue.$set() 向響應(yīng)式對象中添加一個(gè)屬性鸭叙，并確保這個(gè)新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新递雀。
async fetchData() {
let resp = await axios.get("/category");
this.$set(this.groups, 'a下拉框', resp.data['a下拉框']);
this.$set(this.groups, 'b下拉框', resp.data['b下拉框']);
},
通過這樣的方法缀程，實(shí)現(xiàn)了新增屬性的雙向綁定，并且觸發(fā)了視圖更新杨凑，并且下拉框也可以正常使用了。
