I have created a v-navigation-drawer component with Vue 3 and Vuetify 3.
The v-navigation-drawer functions properly, but I want the child menus to be visible by default without requiring the user's click when the project first launches. I am using v-slot:activator for displaying the child menus. The goal is for users to see the v-navigation-drawer with all the child menu items upon opening the project.
Below is my code snippet-
<template>
<v-navigation-drawer v-model="drawer" width="325">
<v-list :lines="false" density="compact" nav >
<v-list-group v-for="(item, i) in items" :key="i" :value="item" >
<template v-slot:activator="{ props }">
<v-list-item v-bind="props" :prepend-icon="item.icon" :title="item.text" active-color="orange-darken-1"
rounded="xl" ></v-list-item>
</template>
<v-list-item-title v-for="itemdetail in item.subItem" :key="itemdetail.id" :value="itemdetail" >
<template v-if="itemdetail">
<v-list-item :prepend-icon="itemdetail.icon" :title="itemdetail.text"
active-color="teal-darken-1" rounded="xl">
</v-list-item>
</template>
</v-list-item-title>
</v-list-group>
</v-list>
</v-navigation-drawer>
</template>
<script>
export default {
data: () => ({
drawer: true,
items: [{
text: 'Parent Menu',
icon: 'mdi-pier-crane',
subItem: [{
text: 'Child Menu 1',
icon: 'mdi-engine'
},
{
text: 'Child Menu 2',
icon: 'mdi-calculator-variant'
},
{
text: 'Child Menu 3',
icon: 'mdi-list-status'
},
{
text: 'Child Menu 4',
icon: 'mdi-calendar-edit'
},
]
}, ],
}),
}
</script>