Vue+ElementUI項目遇到下拉框組件el-select在編輯對話框中直接顯示option的value值而非選中綁定值選項坑

問題

這個錯誤碰到了幾次了，這次記錄下，因為沒有截圖，所以找了一張類似的如下：

可以看到下拉框直接顯示了選項值但也並非我們的本意，這個錯誤一般是由於下拉框組件是異步接口動態綁定時出現的，一般都會在表單內有以下代碼：

        <el-form-item>
          <el-select v-model="dtType" @change="changeSelect()" size="small" filterable clearable placeholder="請選擇字典類型">
            <el-option v-for="(item,index) in options" :key="'dict'+index" :label="item.dtReamrk" :value="item.dtType">
            </el-option>
          </el-select>
        </el-form-item>

options是我們的異步接口獲取到的，但實際在鈎子函數created中已經得到，當點擊編輯按鈕時應當顯示表格行的字段值選中，但是卻在選擇框中直接插入了值，因為Vue無法監聽數組或對象內的屬性變化去影響DOM。

解決方案

 Vue官方文檔的強制刷新的方法：

      this.$forceUpdate();

官方給的解釋：

迫使 Vue 實例重新渲染。注意它僅僅影響實例本身和插入插槽內容的子組件，而不是所有子組件。

在changeSelect下拉框改變事件中添加強制vue渲染組件，可以間接達到效果：

      changeSelect() {
        this.$forceUpdate();
      },