select 重复选中，无法触发change事件 解决办法 -vue篇

如图：如果我们选中bb2后，想要再次点击，就会发现无法触发change事件，

问题

目前发现，只有改变了e.target.value才能重新触发change,但是如果把e.target.value不能是选项外的value，这样会使选择框变空白，

解决办法

这里就需要一个额外的option来接受选中的e.target.value，
同时内容也要改变成选中的内容

所以我们设置了一个默认值，
因为默认值只有在未使用select的时候才有用，select一旦改变就不需要默认值了

 <option
        :value="999"
        selected:disabled
        style="display:none"
      >{{selectedValue}}</option>

在每次选择后，把选择的e.target.value变成默认值的value,
只要默认值改成一个变量，把它赋值成选中项的内容，每次选中（展示）的其实是默认值这个选项，这样就不会影响change的触发机制

selected(e) {
      const obj = this.arr.find(item => {
        return item.id === +e.target.value
      })
      this.selectedValue = obj.name
      e.target.value = 999

    },

完整代码

<template>
  <div>
    <select @change="selected($event)">
      <option
        :value="999"
        selected:disabled
        style="display:none"
      >{{selectedValue}}</option>
      <option
        v-for="item in arr"
        :key="item.id"
        :value="item.id"
      >{{item.name}}</option>
    </select>

  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { id: 1, name: 'aa1' },
        { id: 2, name: 'bb2' },
        { id: 3, name: 'cc3' },
        { id: 4, name: 'dd4' },
      ],
      selectedValue: "默认"
    }
  },
  methods: {
    selected(e) {
      console.log(e.target.value)
      const obj = this.arr.find(item => {
        return item.id === +e.target.value
      })
      console.log(obj)
      this.selectedValue = obj.name
      e.target.value = 999

    },

  }
}
</script>