專案中有一個需求，填寫表單，有兩個相關聯的下拉框，要根據部門篩選部門內的人員

當部門切換時，清空負責人裡的內容

一開始的寫法

v-for="(item,i) in getDepartments"

:key="i"

:label="item.name"

:value="item.id"

>

v-for="(item,i) in headuserList"

:key="i"

:label="item.name"

:value="item.id"

>

然後在methods裡的change方法：

departChange(val) {
// 改變時獲取id通過id查詢當前部門的人員

API.getHead(val)

.then(res => {
this.headuserList = res.data;

this.ruleForm.followUser = "" // 置空當前選擇的負責人

})

.catch(err => {
console.error(err);

});

},

後來發現這種寫法有bug，切換部門時選擇負責人不能回顯，然後在其他input輸入某個字就立即渲染上去

百度之後好像是因為非同步渲染的原因

在各個部落格上的寫法 就是在第二級的select中的change事件裡寫入這個

this.$forceUpdate()

事實證明這個方法是可行的。

當改變部門後，負責人也清空，選擇負責人也可以回顯。我接著做表單校驗，因為這兩個選項必填

然後……..就悲劇了

發現負責人那一欄已經回顯了，但就是過不了非空驗證

我感覺還是非同步渲染的問題。。。。

資料還沒渲染上去就進入表單判斷了(我猜的，如果說錯了請大佬們在評論區指正[笑臉])

後來試了半天，終於找到解決方法了。

rules那邊的表單驗證正常寫，不用改

需要改的是一級select的change事件。

上程式碼：

departChange(val) {
API.getHead(val)

.then(res => {
this.headuserList = res.data;

// 注意！關鍵就在這個$set的使用，需要用$set把二級select的選項置空

this.$set(this.ruleForm, "followUser", "");

})

.catch(err => {
console.error(err);

});

},

然後就沒問題了，大家可以試一下

如果有大佬的話最好解釋一下為什麼會出現這種情況，是非同步的原因還資料沒有被監聽到呢？