vue下拉框值改变事件_vue一个下拉框值改变，另一个值清空

最近遇到一个问题，当我想在一个下拉框中选值时，另一个下拉框的值清空。可vue有个v-model属性，当我清空另一个下拉框v-model的值为空，就会再一次出发下拉框的@change事件，这样就会导致两个下拉框的值都为空，再次选择下拉框，里面的值才会出来，用户体验非常不好。自己想了好久，最后终于在同事的帮助下写了出来：

中的html部分：

v-for="item in options"

:label="item.label"

:value="item.value"

size="small">

v-for="item in options1"

:label="item.label"

:value="item.value"

size="small">

JS部分：

change(params,val) {

console.log(params)

if((params == 'a')&&(val != '')){

this.SO.b = '';

}

if((params == 'b')&&(val != '')){

this.SO.a = '';

}

}

出现这样问题的原因是，当我在JS中将v-model里的值置为空时，会接着调用change方法，这样就会接着将里面两个内容都清空。 再加一个参数为判断条件时，这样的问题就会避免。