我想在我设计的vuetify侧边栏菜单中的标题中添加一个子菜单。我按如下方式编辑了代码和数据，但无法进行任何更改。
这是我的代码
<v-list flat class="mt-50">
<v-list-item-group v-model="selectedItem" color="black">
<v-list-item v-for="(item, i) in items" :key="i" active-class="border" class="mr-3" :ripple="false" :to="item.link" link>
<v-list-item-icon>
<v-icon v-text="item.icon"></v-icon>
</v-list-item-icon>
<v-list-item-title v-text="item.title"></v-list-item-title>
</v-list-item>
<v-list-item v-for="child in items.child" :key="child.title">
<v-list-item-title :to="child.route">{{ child.title }}</v-list-item-title>
</v-list-item>
</v-list-item-group>
</v-list>
我使用的数据
selectedItem: 0,
items: [
{ icon: 'mdi-account-key', title: 'Users', link: '/dashboard/test' },
{ icon: 'mdi-shopping', title: 'tests', link: '/dashboard/test2' },
{ icon: 'mdi-marker', title: 'tests2', link: '/dashboard/test3' },
childs: [
{ title: 'basic', link: '/dashboard/table/basic' },
{ title: 'data', link: '/dashboard/table/data' },
{ title: 'responsive', link: '/dashboard/table/responsive' },
{ title: 'editable', link: '/dashboard/table/editable' },
{ title: 'filter', link: '/dashboard/table/filter' },
{ title: 'pagination', link: '/dashboard/table/pagination' },
{ title: 'search', link: '/dashboard/table/search' },
{ title: 'sort', link: '/dashboard/table/sort' },
{ title: 'selection', link: '/dashboard/table/selection' },
{ title: 'tree', link: '/dashboard/table/tree' },
{ title: 'custom', link: '/dashboard/table/custom' },
],
尝试如下片段(添加v-list-group以切换子菜单，而且items.child在您的数据中不存在，只有childs(：
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
selectedItem: 0,
items: [{icon: 'mdi-account-key', title: 'Users', link: '/dashboard/test'}, {icon: 'mdi-shopping', title: 'tests', link: '/dashboard/test2'}, {icon: 'mdi-marker', title: 'tests2', link: '/dashboard/test3'},],
childs: [{title: 'basic', link: '/dashboard/table/basic'}, {title: 'data', link: '/dashboard/table/data'}, {title: 'responsive', link: '/dashboard/table/responsive'}, {title: 'editable', link: '/dashboard/table/editable'}, {title: 'filter', link: '/dashboard/table/filter'}, {title: 'pagination', link: '/dashboard/table/pagination'}, { title: 'search', link: '/dashboard/table/search'}, {title: 'sort', link: '/dashboard/table/sort'}, {title: 'selection', link: '/dashboard/table/selection'}, {title: 'tree', link: '/dashboard/table/tree'}, {title: 'custom', link: '/dashboard/table/custom'},],
}
}
})<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-list flat class="mt-50">
<v-list-item-group v-model="selectedItem" color="black">
<!--<v-list-item v-for="(item, i) in items" :key="i" active-class="border" class="mr-3" :ripple="false" :to="item.link" link>-->
<v-list-item v-for="(item, i) in items" :key="i" active-class="border" class="mr-3" :ripple="false" link>
<v-list-item-icon>
<v-icon v-text="item.icon"></v-icon>
</v-list-item-icon>
<v-list-item-title v-text="item.title"></v-list-item-title>
</v-list-item>
<v-list-group no-action sub-group>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title>Submenu</v-list-item-title>
</v-list-item-content>
</template>
<v-list-item v-for="child in childs" :key="child.title">
<v-list-item-title>{{ child.title }}</v-list-item-title>
<!--<v-list-item-title :to="child.route">{{ child.title }}</v-list-item-title>-->
</v-list-item>
</v-list-group>
</v-list-item-group>
</v-list>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
</script>
</body>