javascript - 在 Vuex v-model setter 中接收事件对象

Question

我有一个选择元素接收和更新我的 Vuex 商店:

<select v-model:value="leadTrackNumber"  >
  <option v-for="(track, index) in tracks ">{{ index }}</option>
</select>

这是相关的方法:

leadTrackNumber: {
  get(){
    // process some data
    return leadTrackNumber
  },
  set(value){
    this.$store.commit('updateLeadTrack', value )
  },
},

我想做类似 v-model:value="leadTrackNumber(value, $event)" 的事情，然后在方法中接收它:set(value, event) (但当然该代码不起作用)。这可能吗？

我的意图是使用接收到的 event 参数来模糊选择元素。 (使用 event.target.blur())

我想知道这个问题的答案是为了它本身，并且愿意通过其他方式来做到这一点。 (我可以这样调用一个关于变化的模糊函数:@change="blurFunction($event)"，但这只有在值确实发生变化时才有效——无论如何我都希望它模糊。 )

Answer 1

据我了解:默认情况下，当您选择一个选项时，选择标签会获得轮廓颜色，这意味着它被聚焦。

但您不希望那样。相反，您希望在选择一个选项时从选择中移除焦点。

有几种方法。一种是切换 css 类并添加/删除 ouline 颜色。但我将向您展示如何使用 js 和 vue 来完成。

<div id="app">
  <select v-model="selected_item" @click="option_selected"> <!-- an option got selected so call the option_selected method -->
    <option :value="null">Select item</option>
    <option v-for="todo in todos" :key="todo.id" :value="todo.text">
      {{todo.text}}
    </option>
  </select>
</div>

和 Vue.js 代码:

new Vue({
  el: "#app",
  data: {
    selected_item: null,
    todos: [
      { text: "Learn JavaScript", id: 1 },
      { text: "Learn Vue", id: 2 },
      { text: "Play around in JSFiddle", id: 3 },
      { text: "Build something awesome", id: 4 }
    ]
  },
  methods: {
    option_selected(event) {
        event.target.blur()
    }
  }
})

同时检查这个 fiddle