选择子项时父 Vuetify VMenu 不关闭 [英] Parent Vuetify VMenu Not Closing When Child Selected

问题描述

我的应用程序通过 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(parentMenuInde​​x) {如果(参数.长度){const parentMenu = this.$refs.menuRef[parentMenuInde​​x];parentMenu.isActive = false;}}

其中 this.$refs.menuRef 用于通过 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屋！