Vue+Vuetify3列表组无法展开子项问题求助

你的代码存在两个关键问题，导致子项无法正常展开：

• 错误的注释格式：你用错误的语法注释掉了<v-list-item-content>标签，且闭合标签的注释写法完全错误，使得子项没有被正确包裹在列表组的内容容器中。
• 缺少必要的内容容器：Vuetify的v-list-group要求子项必须放在<v-list-item-content>标签内，才能被识别为可展开的内容部分。

修复后的完整代码如下：

<template>
  <div>
    <v-toolbar color="blue">
      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>Topics</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>

    <v-list>
      <v-list-group v-for="item in items" :key="item.title" v-model="item.active" no-action :prepend-icon="item.action">
        <template v-slot:activator>
          <v-list-item link>
            <v-list-item-title v-text="item.title"></v-list-item-title>
          </v-list-item>
        </template>
        <!-- 正确使用v-list-item-content包裹子项 -->
        <v-list-item-content>
          <v-list-item v-for="child in item.items" :key="child.title">
            <v-list-item-title v-text="child.title"></v-list-item-title>
          </v-list-item>
        </v-list-item-content>
      </v-list-group>
    </v-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          title: '基础组件',
          action: 'mdi-folder',
          active: false,
          items: [
            { title: '按钮' },
            { title: '卡片' }
          ]
        },
        {
          title: '布局组件',
          action: 'mdi-folder-open',
          active: false,
          items: [
            { title: '网格' },
            { title: '工具栏' }
          ]
        }
      ]
    }
  }
}
</script>

修复后点击列表组的激活项，就能正常展开对应的子项列表了。

内容的提问来源于stack exchange，提问作者Augusto Cardozo Martínez