项目中有一个需求，填写表单，有两个相关联的下拉框，要根据部门筛选部门内的人员
当部门切换时，清空负责人里的内容
一开始的写法
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);
});
},
然后就没问题了，大家可以试一下
如果有大佬的话最好解释一下为什么会出现这种情况，是异步的原因还数据没有被监听到呢？
