最近遇到一个问题,当我想在一个下拉框中选值时,另一个下拉框的值清空。可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方法,这样就会接着将里面两个内容都清空。 再加一个参数为判断条件时,这样的问题就会避免。

Logo

前往低代码交流专区

更多推荐