項目中有一個需求，填寫表單，有兩個相關聯的下拉框，要根據部門篩選部門內的人員
當部門切換時，清空負責人里的內容
一開始的寫法
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);
});
},
然后就沒問題了，大家可以試一下
如果有大佬的話最好解釋一下為什么會出現這種情況，是異步的原因還數據沒有被監聽到呢？