关于前端:vue解决select-重复选中无法触发change事件

如图：如果咱们选中 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>