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