Parent Vuetify VMenu Not Closing When Child Selected
1
My app creates it's main navigation dynamically via for loops to generated nested vmenu's and vlists. It generates correctly. The problem is when a user clicks a link in a nested menu, the parent menu remains open. I've tried close-on-click and close-on-content-click on both the main and nested menu, but that's not working.
My codepen has a simplified example. If you select MENU 1, then hover over Subitem 1-1 and click on Subitem 1-1-1, that immediate menu closes, but the main menu remains open.
My codepen.
<div id="app">
<v-app id="inspire">
<v-container>
<!-- top level menu -->
<v-menu
v-for="(menu,index) in menus"
:key="`menu-${index}`"
offset-y
close-on-click
@click="route()"
>
<v-btn
flat
primary
slot="activator"
>{{ menu.title }}</v-btn>
<!-- each item on a menu .. is a menuitem -->
<v-list dense>
<v-list-tile
v-for="(menuitem,index) in menu.items"
:key="`menuitem-${index}`"
@click="route()"
>
<!-- or a popout of submenu items -->
<v-list-tile-content>
<v-menu
offset-x
open-on-hover
close-on-click
>
<v-list-tile
slot="activator"
@click="route()"
>
<v-list-tile-title>{{ menuitem.title }}</v-list-tile-title>
<v-list-tile-action
class="justify-end"
v-if="menuitem.items"
>
<v-icon primary>arrow_right</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list
dense
v-if="menuitem.items"
>
<v-list-tile
v-for="(menusubitem,index) in menuitem.items"
:key="`menusubitem-${index}`"
@click="route()"
>
<v-list-tile-title>{{ menusubitem.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-menu>
</v-container>
</v-app>
</div>
And the related script.
new Vue({
el: '#app',
data: () => ({
menus: [
{
title: 'MENU 1',
items: [
{ title: 'Subitem 1-1',
items: [
{ title: 'Subitem 1-1-1' },
{ title: 'Subitem 1-1-2' }
]
},
{ title: 'Subitem 1-2' },
{ title: 'Subitem 1-3' }
]
},
{
title: 'MENU 2',
},
{
title: 'MENU 3',
items: [
{ title: 'Subitem 3-1' },
{ title: 'Subitem 3-2' },
]
}]
}),
methods: {
route() {
console.log("replace with router")
}
}
})
vue.js navigation vuetify.js
asked Dec 28 '18 at 14:32
mdgmdg
84
add a comment |
1
My app creates it's main navigation dynamically via for loops to generated nested vmenu's and vlists. It generates correctly. The problem is when a user clicks a link in a nested menu, the parent menu remains open. I've tried close-on-click and close-on-content-click on both the main and nested menu, but that's not working.
My codepen has a simplified example. If you select MENU 1, then hover over Subitem 1-1 and click on Subitem 1-1-1, that immediate menu closes, but the main menu remains open.
My codepen.
<div id="app">
<v-app id="inspire">
<v-container>
<!-- top level menu -->
<v-menu
v-for="(menu,index) in menus"
:key="`menu-${index}`"
offset-y
close-on-click
@click="route()"
>
<v-btn
flat
primary
slot="activator"
>{{ menu.title }}</v-btn>
<!-- each item on a menu .. is a menuitem -->
<v-list dense>
<v-list-tile
v-for="(menuitem,index) in menu.items"
:key="`menuitem-${index}`"
@click="route()"
>
<!-- or a popout of submenu items -->
<v-list-tile-content>
<v-menu
offset-x
open-on-hover
close-on-click
>
<v-list-tile
slot="activator"
@click="route()"
>
<v-list-tile-title>{{ menuitem.title }}</v-list-tile-title>
<v-list-tile-action
class="justify-end"
v-if="menuitem.items"
>
<v-icon primary>arrow_right</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list
dense
v-if="menuitem.items"
>
<v-list-tile
v-for="(menusubitem,index) in menuitem.items"
:key="`menusubitem-${index}`"
@click="route()"
>
<v-list-tile-title>{{ menusubitem.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-menu>
</v-container>
</v-app>
</div>
And the related script.
new Vue({
el: '#app',
data: () => ({
menus: [
{
title: 'MENU 1',
items: [
{ title: 'Subitem 1-1',
items: [
{ title: 'Subitem 1-1-1' },
{ title: 'Subitem 1-1-2' }
]
},
{ title: 'Subitem 1-2' },
{ title: 'Subitem 1-3' }
]
},
{
title: 'MENU 2',
},
{
title: 'MENU 3',
items: [
{ title: 'Subitem 3-1' },
{ title: 'Subitem 3-2' },
]
}]
}),
methods: {
route() {
console.log("replace with router")
}
}
})
vue.js navigation vuetify.js
asked Dec 28 '18 at 14:32
mdgmdg
84
add a comment |
1
1
1
0
My app creates it's main navigation dynamically via for loops to generated nested vmenu's and vlists. It generates correctly. The problem is when a user clicks a link in a nested menu, the parent menu remains open. I've tried close-on-click and close-on-content-click on both the main and nested menu, but that's not working.
My codepen has a simplified example. If you select MENU 1, then hover over Subitem 1-1 and click on Subitem 1-1-1, that immediate menu closes, but the main menu remains open.
My codepen.
<div id="app">
<v-app id="inspire">
<v-container>
<!-- top level menu -->
<v-menu
v-for="(menu,index) in menus"
:key="`menu-${index}`"
offset-y
close-on-click
@click="route()"
>
<v-btn
flat
primary
slot="activator"
>{{ menu.title }}</v-btn>
<!-- each item on a menu .. is a menuitem -->
<v-list dense>
<v-list-tile
v-for="(menuitem,index) in menu.items"
:key="`menuitem-${index}`"
@click="route()"
>
<!-- or a popout of submenu items -->
<v-list-tile-content>
<v-menu
offset-x
open-on-hover
close-on-click
>
<v-list-tile
slot="activator"
@click="route()"
>
<v-list-tile-title>{{ menuitem.title }}</v-list-tile-title>
<v-list-tile-action
class="justify-end"
v-if="menuitem.items"
>
<v-icon primary>arrow_right</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list
dense
v-if="menuitem.items"
>
<v-list-tile
v-for="(menusubitem,index) in menuitem.items"
:key="`menusubitem-${index}`"
@click="route()"
>
<v-list-tile-title>{{ menusubitem.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-menu>
</v-container>
</v-app>
</div>
And the related script.
new Vue({
el: '#app',
data: () => ({
menus: [
{
title: 'MENU 1',
items: [
{ title: 'Subitem 1-1',
items: [
{ title: 'Subitem 1-1-1' },
{ title: 'Subitem 1-1-2' }
]
},
{ title: 'Subitem 1-2' },
{ title: 'Subitem 1-3' }
]
},
{
title: 'MENU 2',
},
{
title: 'MENU 3',
items: [
{ title: 'Subitem 3-1' },
{ title: 'Subitem 3-2' },
]
}]
}),
methods: {
route() {
console.log("replace with router")
}
}
})
vue.js navigation vuetify.js
asked Dec 28 '18 at 14:32
mdgmdg
84
My app creates it's main navigation dynamically via for loops to generated nested vmenu's and vlists. It generates correctly. The problem is when a user clicks a link in a nested menu, the parent menu remains open. I've tried close-on-click and close-on-content-click on both the main and nested menu, but that's not working.
My codepen has a simplified example. If you select MENU 1, then hover over Subitem 1-1 and click on Subitem 1-1-1, that immediate menu closes, but the main menu remains open.
My codepen.
<div id="app">
<v-app id="inspire">
<v-container>
<!-- top level menu -->
<v-menu
v-for="(menu,index) in menus"
:key="`menu-${index}`"
offset-y
close-on-click
@click="route()"
>
<v-btn
flat
primary
slot="activator"
>{{ menu.title }}</v-btn>
<!-- each item on a menu .. is a menuitem -->
<v-list dense>
<v-list-tile
v-for="(menuitem,index) in menu.items"
:key="`menuitem-${index}`"
@click="route()"
>
<!-- or a popout of submenu items -->
<v-list-tile-content>
<v-menu
offset-x
open-on-hover
close-on-click
>
<v-list-tile
slot="activator"
@click="route()"
>
<v-list-tile-title>{{ menuitem.title }}</v-list-tile-title>
<v-list-tile-action
class="justify-end"
v-if="menuitem.items"
>
<v-icon primary>arrow_right</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list
dense
v-if="menuitem.items"
>
<v-list-tile
v-for="(menusubitem,index) in menuitem.items"
:key="`menusubitem-${index}`"
@click="route()"
>
<v-list-tile-title>{{ menusubitem.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-menu>
</v-container>
</v-app>
</div>
And the related script.
new Vue({
el: '#app',
data: () => ({
menus: [
{
title: 'MENU 1',
items: [
{ title: 'Subitem 1-1',
items: [
{ title: 'Subitem 1-1-1' },
{ title: 'Subitem 1-1-2' }
]
},
{ title: 'Subitem 1-2' },
{ title: 'Subitem 1-3' }
]
},
{
title: 'MENU 2',
},
{
title: 'MENU 3',
items: [
{ title: 'Subitem 3-1' },
{ title: 'Subitem 3-2' },
]
}]
}),
methods: {
route() {
console.log("replace with router")
}
}
})
vue.js navigation vuetify.js
vue.js navigation vuetify.js
asked Dec 28 '18 at 14:32
mdgmdg
84
asked Dec 28 '18 at 14:32
mdgmdg
84
edited Dec 31 '18 at 13:07
mdg
asked Dec 28 '18 at 14:32
mdgmdg
84
asked Dec 28 '18 at 14:32
mdgmdg
84
asked Dec 28 '18 at 14:32
mdgmdg
84
84
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
One option would be to access and close parent menu explicitly via isActive property:
route(parentMenuIndex) {
if (arguments.length) {
const parentMenu = this.$refs.menuRef[parentMenuIndex];
parentMenu.isActive = false;
}
}
where this.$refs.menuRef is used to access parent menu component via the ref attribute:
<v-menu
v-for="(menu,index) in menus"
:key="`menu-${index}`"
offset-y
close-on-click
close-on-content-click
ref="menuRef"
>
...
</v-menu>
Here is an updated CodePen
answered Dec 30 '18 at 22:27
Vadim GremyachevVadim Gremyachev
34.8k770112
Thanks. When I run the updated codepen, it executes correctly for the first subitem, but not the second. When looking at "parentMenu.isActive" in the click event method, it's always false on the second item.
– mdg
Dec 31 '18 at 13:09
@mdb, indeed, the incorrect index of parent menu has been passed for the second sub menu, codepen has been updated.
– Vadim Gremyachev
Dec 31 '18 at 17:17
1
Perfect, thanks!
– mdg
Jan 2 at 17:49
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53960121%2fparent-vuetify-vmenu-not-closing-when-child-selected%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
One option would be to access and close parent menu explicitly via isActive property:
route(parentMenuIndex) {
if (arguments.length) {
const parentMenu = this.$refs.menuRef[parentMenuIndex];
parentMenu.isActive = false;
}
}
where this.$refs.menuRef is used to access parent menu component via the ref attribute:
<v-menu
v-for="(menu,index) in menus"
:key="`menu-${index}`"
offset-y
close-on-click
close-on-content-click
ref="menuRef"
>
...
</v-menu>
Here is an updated CodePen
answered Dec 30 '18 at 22:27
Vadim GremyachevVadim Gremyachev
34.8k770112
Thanks. When I run the updated codepen, it executes correctly for the first subitem, but not the second. When looking at "parentMenu.isActive" in the click event method, it's always false on the second item.
– mdg
Dec 31 '18 at 13:09
@mdb, indeed, the incorrect index of parent menu has been passed for the second sub menu, codepen has been updated.
– Vadim Gremyachev
Dec 31 '18 at 17:17
1
Perfect, thanks!
– mdg
Jan 2 at 17:49
add a comment |
0
One option would be to access and close parent menu explicitly via isActive property:
route(parentMenuIndex) {
if (arguments.length) {
const parentMenu = this.$refs.menuRef[parentMenuIndex];
parentMenu.isActive = false;
}
}
where this.$refs.menuRef is used to access parent menu component via the ref attribute:
<v-menu
v-for="(menu,index) in menus"
:key="`menu-${index}`"
offset-y
close-on-click
close-on-content-click
ref="menuRef"
>
...
</v-menu>
Here is an updated CodePen
answered Dec 30 '18 at 22:27
Vadim GremyachevVadim Gremyachev
34.8k770112
Thanks. When I run the updated codepen, it executes correctly for the first subitem, but not the second. When looking at "parentMenu.isActive" in the click event method, it's always false on the second item.
– mdg
Dec 31 '18 at 13:09
@mdb, indeed, the incorrect index of parent menu has been passed for the second sub menu, codepen has been updated.
– Vadim Gremyachev
Dec 31 '18 at 17:17
1
Perfect, thanks!
– mdg
Jan 2 at 17:49
add a comment |
0
0
0
One option would be to access and close parent menu explicitly via isActive property:
route(parentMenuIndex) {
if (arguments.length) {
const parentMenu = this.$refs.menuRef[parentMenuIndex];
parentMenu.isActive = false;
}
}
where this.$refs.menuRef is used to access parent menu component via the ref attribute:
<v-menu
v-for="(menu,index) in menus"
:key="`menu-${index}`"
offset-y
close-on-click
close-on-content-click
ref="menuRef"
>
...
</v-menu>
Here is an updated CodePen
answered Dec 30 '18 at 22:27
Vadim GremyachevVadim Gremyachev
34.8k770112
One option would be to access and close parent menu explicitly via isActive property:
route(parentMenuIndex) {
if (arguments.length) {
const parentMenu = this.$refs.menuRef[parentMenuIndex];
parentMenu.isActive = false;
}
}
where this.$refs.menuRef is used to access parent menu component via the ref attribute:
<v-menu
v-for="(menu,index) in menus"
:key="`menu-${index}`"
offset-y
close-on-click
close-on-content-click
ref="menuRef"
>
...
</v-menu>
Here is an updated CodePen
answered Dec 30 '18 at 22:27
Vadim GremyachevVadim Gremyachev
34.8k770112
answered Dec 30 '18 at 22:27
Vadim GremyachevVadim Gremyachev
34.8k770112
answered Dec 30 '18 at 22:27
Vadim GremyachevVadim Gremyachev
34.8k770112
answered Dec 30 '18 at 22:27
Vadim GremyachevVadim Gremyachev
34.8k770112
34.8k770112
Thanks. When I run the updated codepen, it executes correctly for the first subitem, but not the second. When looking at "parentMenu.isActive" in the click event method, it's always false on the second item.
– mdg
Dec 31 '18 at 13:09
@mdb, indeed, the incorrect index of parent menu has been passed for the second sub menu, codepen has been updated.
– Vadim Gremyachev
Dec 31 '18 at 17:17
1
Perfect, thanks!
– mdg
Jan 2 at 17:49
add a comment |
Thanks. When I run the updated codepen, it executes correctly for the first subitem, but not the second. When looking at "parentMenu.isActive" in the click event method, it's always false on the second item.
– mdg
Dec 31 '18 at 13:09
@mdb, indeed, the incorrect index of parent menu has been passed for the second sub menu, codepen has been updated.
– Vadim Gremyachev
Dec 31 '18 at 17:17
1
Perfect, thanks!
– mdg
Jan 2 at 17:49
Thanks. When I run the updated codepen, it executes correctly for the first subitem, but not the second. When looking at "parentMenu.isActive" in the click event method, it's always false on the second item.
– mdg
Dec 31 '18 at 13:09
Thanks. When I run the updated codepen, it executes correctly for the first subitem, but not the second. When looking at "parentMenu.isActive" in the click event method, it's always false on the second item.
– mdg
Dec 31 '18 at 13:09
@mdb, indeed, the incorrect index of parent menu has been passed for the second sub menu, codepen has been updated.
– Vadim Gremyachev
Dec 31 '18 at 17:17
@mdb, indeed, the incorrect index of parent menu has been passed for the second sub menu, codepen has been updated.
– Vadim Gremyachev
Dec 31 '18 at 17:17
1
1
Perfect, thanks!
– mdg
Jan 2 at 17:49
Perfect, thanks!
– mdg
Jan 2 at 17:49
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53960121%2fparent-vuetify-vmenu-not-closing-when-child-selected%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
