Vuetify 3中v-list-group无法展开/折叠问题求助

核心问题与修复步骤 #

1. 响应式状态未正确声明
   你直接定义的open是普通数组，不具备Vue响应式能力，v-model:opened无法同步展开状态。需要用ref包裹：

   const open = ref(['Users']);
   

2. Activator插槽未绑定必要Props
   v-list-group的activator插槽需要接收Vuetify提供的内置props，这些props包含了触发展开/折叠的点击事件逻辑。必须将props绑定到v-list-item上：

   <template v-slot:activator="{ props }">
     <v-list-item v-bind="props" prepend-icon="mdi-account-circle" title="Users"></v-list-item>
   </template>
   

修正后的完整代码 #

<template>
  <v-card class="mx-auto" width="300">
    <v-list v-model:opened="open">
      <v-list-item prepend-icon="mdi-home" title="Home"></v-list-item>

      <v-list-group value="Users">
        <template v-slot:activator="{ props }">
          <v-list-item v-bind="props" prepend-icon="mdi-account-circle" title="Users"></v-list-item>
        </template>

        <v-list-group value="Admin">
          <template v-slot:activator="{ props }">
            <v-list-item v-bind="props" title="Admin"></v-list-item>
          </template>

          <v-list-item v-for="([title], i) in admins" :key="i" :title="title" :value="title"></v-list-item>
        </v-list-group>

        <v-list-group value="Actions">
          <template v-slot:activator="{ props }">
            <v-list-item v-bind="props" title="Actions"></v-list-item>
          </template>
          <v-list-item v-for="([title], i) in cruds" :key="i" :value="title" :title="title"></v-list-item>
        </v-list-group>
      </v-list-group>
    </v-list>
  </v-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const open = ref(['Users']);
const admins = [
  ['Management', 'mdi-account-multiple-outline'],
  ['Settings', 'mdi-cog-outline'],
];
const cruds = [
  ['Create', 'mdi-plus-outline'],
  ['Read', 'mdi-file-outline'],
  ['Update', 'mdi-update'],
  ['Delete', 'mdi-delete'],
];

// 其他无关变量可按需保留
const links = ['Hi', 'Contacts', 'Settings', 'Hi', 'Contacts', 'Settings', 'Hi'];
const buttonLinks = ['Hi', 'Contacts', 'Settings', 'Hi', 'Contacts', 'Settings', 'Hi', 'Contacts', 'Settings', 'Hi', 'Contacts', 'Settings', 'Hi', 'Contacts', 'Settings', 'Hi', 'Contacts', 'Settings', 'Hi', 'Contacts', 'Settings', 'Hi', 'Contacts', 'Settings'];
const mini = true;
const items = [
  { title: 'Hello', icon: 'mdi-view-dashboard' },
  { title: 'About', icon: 'mdi-forum' },
];
</script>

额外检查 #

确保你的项目已正确初始化Vuetify，比如在main.ts中：

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'

const vuetify = createVuetify()
const app = createApp(App)

app.use(vuetify).mount('#app')

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