解決vue+el-element二級聯動，選項選擇後不顯示的問題

一、問題描述

        vue的二級聯動可以採用v-if的方式去實現，也就是在第一級選項的值發生變化後，清空第二級選項所關聯的model的值，並將第二級選項所取的變量數組變更。會產生的問題是，第二級選項的值有時候會出現值已改變但是頁面上並不顯示改變值的情況。

 

二、跟蹤問題

        產生問題的原因爲vue是基於數據驅動的，這麼做有可能會導致數據刷新不及時。如果要測試去跟蹤問題的原因，可以在第二級的el-select中寫上@change方法，可以看到當改變選項值後，該el-select的value是發生變化了，但是在頁面中無法顯示。

 

三、解決方式

       給第二級el-select的@change關聯方法中加入一行代碼，以下爲僞代碼：

<el-select v-model="status" clearable @change="updateFun">
</el-select>

updateFun() {
   this.$forceUpdate();
}

       這樣，在每次更改第二級選項的值後，調用方法，執行“this.$forceUpdate();”即可