Vuetify 3 v-list-group手风琴效果：展开时收起其他子菜单

要实现手风琴式折叠菜单（展开一个项时自动收起其他已展开项），需要手动维护当前展开项的状态——因为Vuetify 3中v-list-group的v-model绑定逻辑与v2不同，且未暴露可直接修改的is-open属性。以下是可行的实现方案：

修改后的模板代码 #

<v-navigation-drawer
        v-model="drawer"
        temporary
        location="right"
        theme="dark"
    >
        <v-list density="compact">
            <v-list-group 
                :active="index === currentOpenIndex"
                v-for="(item, index) in menuItems" 
                :key="item.title"
            >
                <template v-slot:activator="{ props }">
                    <v-list-item
                        v-bind="props"
                        :title="item.title"
                        @click="handleGroupClick(index)"
                    ></v-list-item>
                </template>

                <v-list-item
                    v-for="subMenu in item.subMenuItems"
                    :key="subMenu"
                    :title="subMenu"
                ></v-list-item>
            </v-list-group>
        </v-list>
    </v-navigation-drawer>

修改后的脚本代码 #

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

const drawer = ref(false)
const currentOpenIndex = ref(null) // 维护当前展开的菜单项索引

const menuItems = ref([
    {
        title: "Menu Item 1",
        subMenuItems: ["Sub Menu Item 1", "Sub Menu Item 2", "Sub Menu Item 3"]
    },
    {
        title: "Menu Item 2",
        subMenuItems: ["Sub Menu Item 1", "Sub Menu Item 2", "Sub Menu Item 3"]
    },
    {
        title: "Menu Item 3",
        subMenuItems: ["Sub Menu Item 1", "Sub Menu Item 2", "Sub Menu Item 3"]
    }
])

const handleGroupClick = (index) => {
    // 点击已展开项则收起，否则展开该项并自动收起其他项
    currentOpenIndex.value = currentOpenIndex.value === index ? null : index
}
</script>

关键说明 #

1. 状态独立维护：用currentOpenIndex变量单独记录当前展开项的索引，初始值null表示所有项都处于收起状态。
2. 激活状态绑定：v-list-group的:active属性绑定到索引匹配判断，只有当前索引对应的项会被设为展开状态。
3. 点击逻辑控制：点击激活器时触发状态切换，实现“展开当前、收起其他”的手风琴效果。

这种方式避开了Vuetify 3中v-list-group双向绑定的兼容性问题，通过手动控制状态实现稳定的手风琴行为。

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