问题描述
限时送ChatGPT账号..我的应用程序通过 for 循环动态创建它的主导航,以生成嵌套的 vmenu 和 vlist.它正确生成.问题是当用户单击嵌套菜单中的链接时,父菜单保持打开状态.我已经尝试在主菜单和嵌套菜单上单击关闭和内容单击关闭,但这不起作用.
我的 codepen 有一个简化的例子.如果您选择 MENU 1,然后将鼠标悬停在 Subitem 1-1 上并单击 Subitem 1-1-1,则立即菜单关闭,但主菜单保持打开状态.
我的代码笔.
<v-app id="inspire"><v-容器><!-- 顶级菜单--><v-菜单v-for="(menu,index) 在菜单中":key="`menu-${index}`"偏移-y点击关闭@click="路由()"><v-btn平坦的基本的插槽 =激活器">{{ menu.title }}</v-btn><!-- 菜单上的每一项.. 都是一个菜单项 --><v-list密集><v-list-tilev-for="(menuitem,index) in menu.items":key="`menuitem-${index}`"@click="路由()"><!-- 或弹出子菜单项--><v-list-tile-content><v-菜单偏移-x悬停打开点击关闭><v-list-tile插槽 =激活器"@click="路由()"><v-list-tile-title>{{ menuitem.title }}</v-list-tile-title><v-list-tile-action类=对齐结束"v-if="menuitem.items"><v-icon primary>arrow_right</v-icon></v-list-tile-action></v-list-tile><v-列表稠密v-if="menuitem.items"><v-list-tilev-for="(menusubitem,index) in menuitem.items":key="`menusubitem-${index}`"@click="路由()"><v-list-tile-title>{{ menusubitem.title }}</v-list-tile-title></v-list-tile></v-list></v-菜单></v-list-tile-content></v-list-tile></v-list></v-菜单></v-容器></v-app>
以及相关的脚本.
new Vue({el: '#app',数据:() =>({菜单:[{title: '菜单 1',项目: [{ title: '子项目 1-1',项目: [{ title: '子项目 1-1-1' },{ title: '子项目 1-1-2' }]},{ title: 'Subitem 1-2' },{ title: '子项目 1-3' }]},{title: '菜单 2',},{title: '菜单 3',项目: [{ title: '子项目 3-1' },{ title: '子项目 3-2' },]}]}),方法: {路线() {console.log("替换为路由器")}}})
解决方案 一个选项是通过 isActive
属性显式访问和关闭父菜单:
route(parentMenuIndex) {如果(参数.长度){const parentMenu = this.$refs.menuRef[parentMenuIndex];parentMenu.isActive = false;}}
其中 this.$refs.menuRef
用于通过 父 菜单组件components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements" rel="nofollow noreferrer">ref
属性:
这是一个更新的CodePen
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")
}
}
})
解决方案
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
这篇关于选择子项时父 Vuetify VMenu 不关闭的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论