Trying to create a menu similar to the expansion lists example in the Vuetify documentation. This menu utilizes the v-list-group and v-slot:activator components. Each child element has a list-item, making it easy to add a Vue Router link. However, the challenge arises when a parent list item (e.g., Dashboard) has no children items. In such cases, I want to add a Vue Router link using the :to directive, but I'm uncertain about how to achieve this since the parent list items use the v-slot:activator template.
I've looked into the v-slot activator on GitHub, but I couldn't find information on how to implement the functionality I require.
Template
<v-list>
<v-list-group
v-for="item in items"
:key="item.name"
v-model="item.active"
:prepend-icon="item.icon"
:append-icon="item.children ? undefined : ''"
no-action
>
//Need to make this work with :to or @click
<template v-slot:activator :to="{name: item.route}">
<v-list-item-content>
<v-list-item-title v-text="item.name"></v-list-item-title>
</v-list-item-content>
</template>
<v-list-item
v-for="childItem in item.children"
:key="childItem.name"
:to="{name:childItem.route}"
>
<v-list-item-content>
<v-list-item-title v-text="childItem.name"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
</v-list>
Data
items: [
{
name: 'Dashboard',
route: 'dashboard',
active: false,
icon: 'mdi-view-dashboard',
},
{
name: 'Editor',
icon: 'mdi-pencil',
active: false,
children: [
{
name: 'General',
route: 'general',
},
{
name: 'Designs',
route: 'designs',
},
{
name: 'Images',
route: 'images',
},
],
},
];
Update
I found a solution by including a v-list-item within the template when the parent element has a route key. I then used absolute positioning to extend its size to match the parent template. Am I missing a more efficient approach for achieving this?
<template v-slot:activator>
<v-list-item v-if="item.route" :to="{name: item.route}" class="item-link"></v-list-item>
<v-list-item-content>
<v-list-item-title v-text="item.name"></v-list-item-title>
</v-list-item-content>
</template>
Style
.item-link {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}