select标签点击同一个option时无法再次触发该怎么解决(在VUE3里使用了v-model绑定了该标签)
这可能是因为Vue对v-model绑定的select标签做了一些优化,如果当前选中的option和之前选中的相同,Vue不会再次触发change事件。可以尝试以下两种方法解决该问题:
.lazy
修饰符在v-model后面添加.lazy
修饰符,这会延迟select标签的更新,直到选择器失去焦点或按下enter键才会触发v-model的更新,因此可以再次触发change事件。例如:<select v-model.lazy="selectedOption">...</select>
@change
事件如果不想使用.lazy
修饰符,也可以使用@change
事件监听选择器的变化,而不是使用v-model。例如:
<template>
<select @change="handleSelectChange">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</template>
<script>
export default {
data() {
return {
selectedOption: ''
};
},
methods: {
handleSelectChange(event) {
// 处理选择器的变化
this.selectedOption = event.target.value;
// ...
}
}
}
</script>
这样就可以在选择同一个option时多次触发change事件了。
获取到的为对应选项的value
值
<div id="container">
<h3 v-html="selected"></h3>
<select v-model="selected">
<option disabled value="">你想去哪</option>
<option value="山西">山西</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
</div>
var vm = new Vue({
el: "#container",
data: {
selected: "",
},
})
根据以上参考资料,可以得出以下解决方案:
在Vue3中使用v-model绑定了select标签后,当用户多次点击同一个选项时触发不了该选项的问题,可以通过watch监听selected变量的变化,并在变化时将其置为空字符串,然后再立即重新赋值为选中的选项的value。
具体步骤如下:
在Vue实例中加入watch选项,监听selected变量的变化。
在watch的处理函数中,判断如果selected从有值变为空字符串,则不做处理;否则,将selected重新赋值为当前选中选项的value。
代码实现如下:
<div id="container">
<h3 v-html="selected"></h3>
<select v-model="selected">
<option disabled value="">你想去哪</option>
<option value="山西">山西</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
</div>
var vm = new Vue({
el: "#container",
data: {
selected: "",
},
watch: {
selected: function(newValue, oldValue) {
if (newValue === "" || newValue === oldValue) {
return;
}
this.selected = "";
this.$nextTick(() => {
this.selected = newValue;
});
}
},
})
在watch的处理函数中,使用了Vue的$nextTick方法来确保操作是在DOM更新之后执行的,从而保证重新赋值时可以正确选中选项。
经过以上处理,现在不管点击多少次同一个选项,都能正常触发选中操作了。