如图:如果我们选中bb2后,想要再次点击,就会发现无法触发change事件,
问题
目前发现,只有改变了e.target.value才能重新触发change,但是如果把e.target.value不能是选项外的value,这样会使选择框变空白,
解决办法
这里就需要一个额外的option来接受选中的e.target.value,
同时内容也要改变成选中的内容
所以我们设置了一个默认值,
因为默认值只有在未使用select的时候才有用,select一旦改变就不需要默认值了
{{selectedValue}}
在每次选择后,把选择的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 },
完整代码
{{selectedValue}}{{item.name}}
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 }, } }