问题描述:
做项目时用了2个el-select下拉框,一个下拉框选择学校,一个下拉框选择专业,专业的数据源是根据学校的选择来动态改变的,由于后台没有写成树的形式,所以写了2个下拉框进行联动。
这里就有一个问题:学校改变后,虽然专业的数据源发生了变化,但是原来的专业绑定值并没有清空,所以我在此就手动清空了专业的值。
这是就有了这个奇怪的问题,学校改变后,原来的专业绑定值虽然清空了,但是却无法选中了。
解决办法1:使用 this.$set 来设置变量的值,让视图重新render
在学校的值改变时,清空原专业值时用$set(),而不是直接赋值为空。
schoolChange (value) {
// this.form.specialtyid=''
this.$set(this.form, 'specialtyid', '')
if (!value) {
this.specialtyList = []
} else {
this.GetspecialtynList(value)
}
},
解决办法2:直接声明specialtyid变量
另一种解决办法,就是将specialtyid的值,直接写到data里,el-select绑定值也直接使用specialtyid,而不是使用form.specialtyid,此时再清空specialtyid的值就可以直接赋值了
解决办法3:给专业的el-select添加@change事件
<el-select v-model="form.specialtyid" @change="specChange">
<el-option
v-for="item in specialtyList"
:label="item.orgname"
:key="item.orgid"
:value="item.orgid"
></el-option>
</el-select>
specChange () {
//强制刷新
this.$forceUpdate()
},