时间戳

首页 > 解决方案 > 选择子项时父级 Vuetify VMenu 未关闭

vue.js - 选择子项时父级 Vuetify VMenu 未关闭

问题描述

我的应用程序通过 for 循环动态创建它的主导航，以生成嵌套的 vmenu 和 vlist。它正确生成。问题是当用户单击嵌套菜单中的链接时，父菜单保持打开状态。我已经尝试在主菜单和嵌套菜单上单击关闭和内容单击关闭，但这不起作用。

我的 codepen 有一个简化的例子。如果您选择 MENU 1，然后将鼠标悬停在 Subitem 1-1 上并单击 Subitem 1-1-1，该即时菜单将关闭，但主菜单保持打开状态。

我的密码笔。

<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>

以及相关的脚本。

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.jsnavigationvuetify.js

解决方案

一种选择是通过isActive属性显式访问和关闭父菜单：

route(parentMenuIndex) {
  if (arguments.length) {
      const parentMenu = this.$refs.menuRef[parentMenuIndex];
      parentMenu.isActive = false;
  }
}

wherethis.$refs.menuRef用于通过属性访问父菜单组件：ref

<v-menu
      v-for="(menu,index) in menus"
      :key="`menu-${index}`"
      offset-y
      close-on-click
      close-on-content-click
      ref="menuRef"
>
...
</v-menu>

这是一个更新的 CodePen

推荐阅读