Vuex中v-model的setter如何接收事件对象？

好问题！首先直接回答你：Vue的计算属性setter本身不支持直接接收event参数——因为计算属性的v-model绑定本质上是把值的变化传递给setter，不会自动传递事件对象。不过没关系，我们有几种简单的方法可以实现你想要的「无论值是否变化，选择后让select失焦」的需求，下面给你详细拆解：

方法1：直接用@click监听选项点击（最推荐） #

不管用户点击的是当前已选中的选项，还是新选项，点击事件都会触发，刚好能覆盖你要的「无论值变不变都失焦」的场景：

<select v-model:value="leadTrackNumber" @click="(e) => e.target.blur()">
  <option v-for="(track, index) in tracks" :key="index">{{ index }}</option>
</select>

这里直接绑定内联函数，点击后立刻让select元素失焦。记得给option加上:key属性，符合Vue列表渲染的规范哦。

如果不想写内联函数，也可以抽成组件方法：

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

methods: {
  handleSelectBlur(e) {
    e.target.blur();
    // 要是需要额外做些逻辑，也可以在这里补充
  }
}

方法2：结合ref在计算属性setter中失焦（仅值变化时生效） #

如果你还是想结合计算属性的逻辑，也可以通过ref获取select元素，然后在setter里调用失焦方法：

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

computed: {
  leadTrackNumber: {
    get() {
      // 你的原有数据处理逻辑
      return this.$store.state.leadTrackNumber;
    },
    set(value) {
      this.$store.commit('updateLeadTrack', value);
      // 通过ref获取元素并失焦
      this.$refs.leadTrackSelect.blur();
    }
  }
}

不过要注意：这种方法只有在值发生变化时才会触发setter，所以如果用户点击了当前已选中的选项，setter不会执行，也就不会失焦。适合只需要值变化时失焦的场景，对你的需求来说不如方法1通用。

补充：为什么你之前的写法不可行？ #

你尝试的v-model:value="leadTrackNumber(value, $event)"写法不生效，是因为v-model的绑定值需要是一个响应式属性（比如data、computed），而不是函数调用。Vue的v-model语法糖会自动把值的变化映射到setter或data属性赋值，不会把event参数传递给绑定的属性。

内容的提问来源于stack exchange，提问作者drenl