如何在 Vuetify 上创建嵌套菜单？

Question

我目前正在使用 Vuetify 1.5.18，在尝试使用 toolbar 组件和 list-group.

创建嵌套菜单时遇到了一些问题

菜单可以使用，但当我单击展开时它会关闭。

这是 CodePen：https://codepen.io/fabiozanchi/pen/dybBmKj

下面是代码：

HTML

<div id="app">
  <v-app id="inspire">
    <v-toolbar>
      <v-toolbar-title>Title</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn flat>Link One</v-btn>
        <v-btn flat>Link Two</v-btn>
        <v-btn flat>Link Three</v-btn>
        <v-menu open-on-hover bottom offset-y>
        <template v-slot:activator="{ on }">
          <v-btn
            color="primary"
            dark
            v-on="on"
          >
            Dropdown
          </v-btn>
        </template>

        <v-list>
            <v-list-group
              v-for="item in items"
              :key="item.title"
              v-model="item.active"
              :prepend-icon="item.action"
              no-action
            >
              <template v-slot:activator>
                <v-list-tile>
                  <v-list-tile-content>
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile-content>
                </v-list-tile>
              </template>

              <v-list-tile
                v-for="subItem in item.items"
                :key="subItem.title"
                @click=""
              >
                <v-list-tile-content>
                  <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
                </v-list-tile-content>

                <v-list-tile-action>
                  <v-icon>{{ subItem.action }}</v-icon>
                </v-list-tile-action>
              </v-list-tile>
            </v-list-group>
          </v-list>
      </v-menu>
      </v-toolbar-items>
    </v-toolbar>
  </v-app>
</div>

JavaScript

new Vue({
  el: '#app',
  data: () => ({
    items: [
        {
          action: 'local_activity',
          title: 'Attractions',
          items: [
            { title: 'List Item' }
          ]
        },
        {
          action: 'restaurant',
          title: 'Dining',
          active: true,
          items: [
            { title: 'Breakfast & brunch' },
            { title: 'New American' },
            { title: 'Sushi' }
          ]
        },
        {
          action: 'school',
          title: 'Education',
          items: [
            { title: 'List Item' }
          ]
        },
        {
          action: 'directions_run',
          title: 'Family',
          items: [
            { title: 'List Item' }
          ]
        },
        {
          action: 'healing',
          title: 'Health',
          items: [
            { title: 'List Item' }
          ]
        },
        {
          action: 'content_cut',
          title: 'Office',
          items: [
            { title: 'List Item' }
          ]
        },
        {
          action: 'local_offer',
          title: 'Promotions',
          items: [
            { title: 'List Item' }
          ]
        }
      ]
  })
})

Answer 1

已修复。正在 v-menu 上添加 :close-on-content-click="false":

 <v-menu
        v-model="menu"
        :close-on-content-click="false"
        :nudge-width="200"
        offset-x
      >

Codepen 已更新：https://codepen.io/fabiozanchi/pen/dybBmKj

Answer 2

您也可以在 v-list-group 中执行此操作，默认情况下为 (:close-on-content-click="true") 在我的情况下我通过添加 (@click.stop).

 <v-list-group
   @click.stop
   v-for="item in items"
   :key="item.title"
   v-model="item.active"
   :prepend-icon="item.action"
   no-action
 >

如何在 Vuetify 上创建嵌套菜单？

How to create Nested menus on Vuetify?

html

nested

menu

vue.js

vuetify.js