三个下拉框实现互斥的功能,选中一个值清空其他组件的值。
为三个下拉框绑定同一个on-change事件,发现选中的时候总是出bug。
代码如下
clearTjlx(state, val) {
if (state == 'gcjy') {
this.$set(this.searchData, 'zbbaTjlx', '');
this.$set(this.searchData, 'sgbaTjlx', '');
} else if (state == 'zbba') {
this.$set(this.searchData, 'gcjyTjlx', '');
this.$set(this.searchData, 'sgbaTjlx', '');
} else if (state == 'sgba') {
this.$set(this.searchData, 'zbbaTjlx', '');
this.$set(this.searchData, 'gcjyTjlx', '');
}
}
因为on-change事件的触发的时机是下拉数据变动。当选中其中一个下拉清空其他下拉,实际上是走了两遍clearTjlx方法。第一次是当前下拉项触发,第二次是被清空下拉项触发。
解决方法是 加一个判空就好了
clearTjlx(state, val) {
//当被清空项触发时,不继续向下走
if (!val) {
return;
}
if (state == 'gcjy') {
this.$set(this.searchData, 'zbbaTjlx', '');
this.$set(this.searchData, 'sgbaTjlx', '');
} else if (state == 'zbba') {
this.$set(this.searchData, 'gcjyTjlx', '');
this.$set(this.searchData, 'sgbaTjlx', '');
} else if (state == 'sgba') {
this.$set(this.searchData, 'zbbaTjlx', '');
this.$set(this.searchData, 'gcjyTjlx', '');
}
}