Question

我有一个选择元素接收＆amp;更新我的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参数来模糊select元素。（使用event.target.blur()）

我想知道这个问题的答案，并且可以采用其他方式来做到这一点。（我可以在变化时调用模糊函数：@change="blurFunction($event)"，但这只有在值确实发生变化时才有效 - 无论如何都希望它变得模糊。）

Answer 1

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

但你不想要那个。当你选择一个选项时，你想要的是，从select中删除焦点。

有几种方法。一种是切换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

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

1 个答案: