一、問題描述
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();”即可
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/229906.html
標籤:其他
