Vuetify 3 v-list-group 无法展开和收缩

问题

在侧边菜单栏v-navigation-drawer中使用v-list，以及v-list-group构建二级菜单，实现菜单分类。

但是v-list-group下的条目无法展开和收缩，或者收缩之后无法再展开。

代码

template 代码

<template>
  <v-layout class="rounded rounded-md">
    <v-navigation-drawer v-model="drawer">
      <v-list nav :opened="open">
        <v-list-group value="菜单一">
          <template v-slot:activator="{ props }">
            <v-list-item
              v-bind="props"
              title="菜单一"
            ></v-list-item>
          </template>
          <v-list-item title="菜单一分类一" value="菜单一分类一" to="/m1-c1"></v-list-item>
          <v-list-item title="菜单一分类二" value="菜单一分类二" to="/m1-c2"></v-list-item>
        </v-list-group>
        <v-list-group value="菜单二">
          <template v-slot:activator="{ props }">
            <v-list-item
              v-bind="props"
              title="菜单二"
            ></v-list-item>
          </template>
          <v-list-item title="菜单二分类一" value="菜单二分类一" to="/m2-c1"></v-list-item>
          <v-list-item title="菜单二分类二" value="菜单二分类二" to="/m2-c2"></v-list-item>
        </v-list-group>
      </v-list>
    </v-navigation-drawer>
  </v-layout>
</template>

script 代码

<script setup>
import {ref} from "vue";

const drawer = ref(true)

const open = ref([])
</script>

问题排查

在Vuetify官方文档上是可以正常使用，猜想是不是新版本引入了Bug。

问题版本

Vuetify 3.5.3，发版时间是2024-02-08，截止发文时，刚发布不久。

尝试解决

将Vuetify回退到3.4.17版本，发现还是存在问题。

再次排查

官方文档有专门的在线代码调试，进入后发现也能正常展开和收缩。

无意间发现右上角显示了版本号：Vue 3.4.7、Vuetify 3.5.3。

马上看了下当前工程的Vue版本，是3.4.17。

回退 Vue 版本

查看package.json中申明的版本信息。

初始化时版本

实际拉取下来的Vue版本为3.4.17。

{
  "dependencies": {
    "vue": "^3.3.0",
    "vuetify": "^3.0.0"
  },
}

回退版本

选择了指定版本：Vue 3.4.7、Vuetify 3.5.3。

问题解决！

{
  "dependencies": {
    "vue": "3.4.7",
    "vuetify": "3.5.3"
  },
}