多个下拉框绑定同一个on-change事件遇到的坑

三个下拉框实现互斥的功能，选中一个值清空其他组件的值。
为三个下拉框绑定同一个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', '');
                }
            }