出現(xiàn)的問題

在data中定義了groups對象，其中每一個屬性雙向綁定一個下拉框，來確定選中的值，它的內(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ù)，但是下拉框并不能點擊，說明我們的雙向綁定出了問題

解決方案

原因

因為 Vue 無法探測普通的新增屬性。在實例創(chuàng)建之后添加新的屬性到實例上，它不會觸發(fā)視圖更新。Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉(zhuǎn)換它，這樣才能讓它是響應(yīng)的。

通過Vue.$set() 解決

Vue.$set() 向響應(yīng)式對象中添加一個屬性，并確保這個新屬性同樣是響應(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下拉框']);
    },

通過這樣的方法，實現(xiàn)了新增屬性的雙向綁定，并且觸發(fā)了視圖更新，并且下拉框也可以正常使用了。