Parent Vuetify VMenu Not Closing When Child Selected

Question

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")
    } 
  }
})

Answer 1

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