vue下拉框值改变事件_vue一个下拉框值改变,另一个值清空
最近遇到一个问题,当我想在一个下拉框中选值时,另一个下拉框的值清空。可vue有个v-model属性,当我清空另一个下拉框v-model的值为空,就会再一次出发下拉框的@change事件,这样就会导致两个下拉框的值都为空,再次选择下拉框,里面的值才会出来,用户体验非常不好。自己想了好久,最后终于在同事的帮助下写了出来:中的html部分:v-for="item in options":label="i
最近遇到一个问题,当我想在一个下拉框中选值时,另一个下拉框的值清空。可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方法,这样就会接着将里面两个内容都清空。 再加一个参数为判断条件时,这样的问题就会避免。
更多推荐
所有评论(0)