关于前端: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>