Vuetify：带多选复选框的按钮下拉组件实现问题

问题描述 #

我需要实现一个按钮，点击后弹出包含多个可选项目的下拉列表——本质是开启multiple属性的v-select组件，但要把v-select的输入框替换成按钮。之前找到的旧示例在最新版Vuetify中无法正常工作，v-select的输入框仍然会显示，请问该如何解决？

解决方案 #

在新版Vuetify中，只需给v-select添加专属属性隐藏输入框，同时调整菜单控制逻辑即可实现需求，具体修改如下：

• 给v-select添加hide-input属性，直接隐藏输入框部分
• 移除v-select上的v-if（避免组件频繁重建），改用menu-props绑定状态控制菜单显示
• 监听菜单的状态变化事件，同步按钮的激活状态

修改后的完整代码 #

<template>
  <v-app>
    <v-container>
      <v-btn
        @click="toggleSelect = !toggleSelect"
        :color="toggleSelect ? 'primary' : 'none'"
      >
        Open
      </v-btn>
      <v-select
        :items="items"
        multiple
        item-title="text"
        item-value="value"
        v-model="selectedItems"
        :menu-props="{ 'model-value': toggleSelect }"
        return-object
        hide-details
        hide-input
        @update:menu="toggleSelect = $event"
      ></v-select>

      <br />
      已选择：{{ selectedItemsTitles }}
    </v-container>
  </v-app>
</template>

<script setup>
import { computed, ref } from 'vue'

const toggleSelect = ref(false)
const selectedItems = ref([])
const selectedItemsTitles = computed(() =>
  selectedItems.value.map(i => i.text).join(', ')
)
const items = [
  { text: '每份甜点(100g)', value: 'name' },
  { text: '卡路里', value: 'calories' },
  { text: '脂肪(g)', value: 'fat' },
]
</script>

关键修改说明 #

• hide-input：Vuetify原生提供的属性，专门用于隐藏v-select的输入框，只保留下拉菜单功能
• @update:menu：监听菜单的打开/关闭状态，当点击外部区域或完成选择后菜单关闭时，自动同步按钮的激活状态
• 移除v-if：避免组件频繁销毁重建，提升性能的同时保证菜单状态的连贯性

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