当前位置: 首页 > Web前端 > HTML5

select被重复选中,无法触发change事件,解决方案-vue

时间:2023-04-05 18:14:24 HTML5

如图:如果我们选中bb2,想再次点击,会发现change事件无法触发。目前发现的问题是只有改变e.target.value才能重新触发change,但是如果e.target.value不能是外面的option值,这样就会让选择框空白,解决方法需要多一个option来接受选中了e.target.value,内容也要改成选中的内容,所以我们设置一个默认值,因为默认值只有在不使用select的时候才有用。更改选择后,不需要默认值。{{selectedValue}}在每次第一次选择后,选中的e.target.value会变为默认值。只要把默认值改成一个变量,就会赋值给选中项的内容。每次实际选择(显示)默认值。这不会影响changeselected(e){constobj=this.arr.find(item=>{returnitem.id===+e.target.value})this.selectedValue=obj.namee的触发机制.target.value=999},完整代码