Vuetify自定义v-select项后点击菜单不关闭，如何解决？

当你用自定义item插槽改写v-select的菜单项后，默认的选中逻辑和菜单关闭事件会失效，点击选项后菜单始终处于展开状态。解决这个问题只需要把默认的属性和事件绑定回自定义元素，同时处理选中赋值即可：

修正后的代码示例 #

基础实现 #

<v-select :items="[1,2,3]" v-model="selectedValue">
    <template v-slot:item="{ item, props }">
        <div v-bind="props" @click="selectedValue = item">
            {{ item }}
        </div>
    </template>
</v-select>

<script>
export default {
  data() {
    return {
      selectedValue: null
    }
  }
}
</script>

手动控制菜单状态（可选） #

如果上述方式仍有问题，可以给v-select添加ref，手动触发菜单关闭：

<v-select :items="[1,2,3]" v-model="selectedValue" ref="customSelect">
    <template v-slot:item="{ item, props }">
        <div v-bind="props" @click="handleSelect(item)">
            {{ item }}
        </div>
    </template>
</v-select>

<script>
export default {
  data() {
    return {
      selectedValue: null
    }
  },
  methods: {
    handleSelect(item) {
      this.selectedValue = item;
      this.$refs.customSelect.toggle();
    }
  }
}
</script>

原理说明 #

• 自定义插槽会覆盖v-select默认的菜单项结构，原来的事件绑定、无障碍属性等都被封装在插槽参数的props对象里，通过v-bind="props"可以把这些默认配置绑定到自定义元素上。
• 给v-model绑定的变量赋值后，v-select会自动识别选中状态并关闭下拉菜单；如果遇到特殊场景，通过ref调用toggle()方法可以强制切换菜单的展开/收起状态。

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