How to create Nested menus on Vuetify? - html

Question

I'm currently usinfg Vuetify 1.5.18 and having some issues trying to create a nested menu usint the toolbar component and list-group.
The menu is working but when I click to expand it closes.
Here's the CodePen: https://codepen.io/fabiozanchi/pen/dybBmKj
And here the following code:
HTML
<div id="app">
<v-app id="inspire">
<v-toolbar>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
<v-menu open-on-hover bottom offset-y>
<template v-slot:activator="{ on }">
<v-btn
color="primary"
dark
v-on="on"
>
Dropdown
</v-btn>
</template>
<v-list>
<v-list-group
v-for="item in items"
:key="item.title"
v-model="item.active"
:prepend-icon="item.action"
no-action
>
<template v-slot:activator>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
<v-list-tile
v-for="subItem in item.items"
:key="subItem.title"
#click=""
>
<v-list-tile-content>
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon>{{ subItem.action }}</v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list-group>
</v-list>
</v-menu>
</v-toolbar-items>
</v-toolbar>
</v-app>
</div>
JavaScript
new Vue({
el: '#app',
data: () => ({
items: [
{
action: 'local_activity',
title: 'Attractions',
items: [
{ title: 'List Item' }
]
},
{
action: 'restaurant',
title: 'Dining',
active: true,
items: [
{ title: 'Breakfast & brunch' },
{ title: 'New American' },
{ title: 'Sushi' }
]
},
{
action: 'school',
title: 'Education',
items: [
{ title: 'List Item' }
]
},
{
action: 'directions_run',
title: 'Family',
items: [
{ title: 'List Item' }
]
},
{
action: 'healing',
title: 'Health',
items: [
{ title: 'List Item' }
]
},
{
action: 'content_cut',
title: 'Office',
items: [
{ title: 'List Item' }
]
},
{
action: 'local_offer',
title: 'Promotions',
items: [
{ title: 'List Item' }
]
}
]
})
})

Answer 1

Fixed. Working adding :close-on-content-click="false" on the v-menu:
<v-menu
v-model="menu"
:close-on-content-click="false"
:nudge-width="200"
offset-x
>
Codepen updated: https://codepen.io/fabiozanchi/pen/dybBmKj

Answer 2

You can also do this thing in v-list-group as (:close-on-content-click="true") by default in my case I solved it by this adding (#click.stop).
<v-list-group
#click.stop
v-for="item in items"
:key="item.title"
v-model="item.active"
:prepend-icon="item.action"
no-action
>