select标签点击同一个option时无法再次触发该怎么解决(在VUE3里使用了v-model绑定了该标签)

select标签点击同一个option时无法再次触发该怎么解决(在VUE3里使用了v-model绑定了该标签)

这可能是因为Vue对v-model绑定的select标签做了一些优化,如果当前选中的option和之前选中的相同,Vue不会再次触发change事件。可以尝试以下两种方法解决该问题:

  1. 使用.lazy修饰符

在v-model后面添加.lazy修饰符,这会延迟select标签的更新,直到选择器失去焦点或按下enter键才会触发v-model的更新,因此可以再次触发change事件。例如:<select v-model.lazy="selectedOption">...</select>

  1. 使用@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事件了。

  • 这篇文章讲的很详细,请看:vue v-model 与 select 的连用
  • 除此之外, 这篇博客: Vue双向绑定v-model及双向绑定修饰符中的 select 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 获取到的为对应选项的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: "",
        },
    })
    
  • 以下回答由chatgpt基于相关博客总结生成:

    根据以上参考资料,可以得出以下解决方案:

    在Vue3中使用v-model绑定了select标签后,当用户多次点击同一个选项时触发不了该选项的问题,可以通过watch监听selected变量的变化,并在变化时将其置为空字符串,然后再立即重新赋值为选中的选项的value。

    具体步骤如下:

    1. 在Vue实例中加入watch选项,监听selected变量的变化。

    2. 在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更新之后执行的,从而保证重新赋值时可以正确选中选项。

    经过以上处理,现在不管点击多少次同一个选项,都能正常触发选中操作了。