如何使用 Vuetify 创建带有子菜单的菜单？

Question

我需要创建一个带有图标按钮的菜单。如果按钮应该有一个菜单 - 单击它应该打开此菜单，否则执行特定操作。如果任何菜单项有子菜单 - 单击 应打开子菜单。基本上它应该看起来像这样（抱歉，用 Paint 绘制）：

现在我的按钮数据具有以下结构：

buttons: [
{
  id: 'options',
  title: 'More Options',
  icon: 'fas fa-bars',
  action: '',
  options: [
    {id: 'dictionary', title: 'Dictionary', action: ''},
    {id: 'visualization', title: 'Data Visualization', action: ''},
    {id: 'password', title: 'Change Password', action: ''},
    {id: 'license', title: 'License Info', action: ''},
    {
      id: 'tools', title: 'Tools', action: '',
      options: [
        {id: 'calculator', title: 'Hex to ASCII calculator'}
      ]
    },
    {id: 'checkup', title: 'Checkup Report', action: ''},
    {id: 'system', title: 'System Monitoring', action: ''},
    {id: 'db', title: 'Database Management', action: ''},
  ]
},
{id: 'reports', title: 'Reports', icon: 'fas fa-chart-line', action: ''},
{
  id: 'help',
  title: 'Help Options',
  icon: 'fas fa-question-circle',
  action: '',
  options: [
    {id: 'user', title: 'User Guide', action: ''},
    {id: 'admin', title: 'Admin Guide', action: ''},
  ]
},
{id: 'settings', title: 'Settings', icon: 'fas fa-cog', action: ''},
{id: 'logout', title: 'Logout', icon: 'fas fa-power-off', action: ''},
]

我尝试使用以下代码创建菜单：

<v-menu v-for='button in $store.state.topbar.buttons'>
      <template #activator="{ on: menu }" v-show='button.options'>
        <v-tooltip bottom >
          <template #activator="{ on: tooltip }">
            <v-btn
              color="info"
              icon small flat
              v-on="{ ...tooltip, ...menu }"
            >
              <v-icon>{{button.icon}}</v-icon>
            </v-btn>
          </template>
          <span>{{button.title}}</span>
        </v-tooltip>
      </template>
      <temmplate  #activator="{ on: tooltip }" v-show='!button.options'>
        <v-tooltip bottom >
          <template #activator="{ on: tooltip }">
            <v-btn
              color="info"
              icon small flat
              v-on="{ ...tooltip }"
            >
              <v-icon>{{button.icon}}</v-icon>
            </v-btn>
          </template>
          <span>{{button.title}}</span>
        </v-tooltip>
      </temmplate>
      <v-list v-show='button.options'>
        <v-list-tile
          v-for="(item, index) in button.options"
          :key="item.id"
          @click=""
        >
          <v-list-tile-content>
            <v-list-tile-title v-html="item.title"></v-list-tile-title>
          </v-list-tile-content>
          <v-list-tile-action v-if='item.options'>
            <v-icon color='info' small>fa-chevron-right</v-icon>
          </v-list-tile-action>

          <v-menu offset-y
            <template v-slot:activator="{ on }">
              <v-list-tile-content>
                <v-list-tile-title v-html="item.title"></v-list-tile-title>
              </v-list-tile-content>
              <v-list-tile-action v-if='item.options'>
                <v-icon color='info' small>fa-chevron-right</v-icon>
              </v-list-tile-action>
            </template>
            <v-list>
              <v-list-tile
                v-for="(submenu, index) in  item.options"
                :key="index"
                @click=""
              >
                <v-list-tile-title>{{ submenu.title }}</v-list-tile-title>
              </v-list-tile>
            </v-list>
          </v-menu>

我得到这个结果：

所以子菜单有点成为菜单的一部分。无论我尝试什么 - 要么我根本看不到子菜单，要么看到如图所示的子菜单。

我在 Vuetify 网站上找不到任何子菜单的文档，尝试遵循菜单、列表、按钮的 API，但无法按照我希望的方式显示。能做到吗？如果是的话——怎么办？

编辑

我尝试在CodePen中重新创建该问题，但结果看起来很奇怪......

Answer 1

你可以使用一些技巧来实现这一点，试试这个。https://codepen.io/anon/pen/yWdBoG?editors=1010

<div id="app">
  <v-app id='menu-app'>
    <v-toolbar light dense color='white' class='top-toolbar'>
      <v-menu v-for='button in buttons' :close-on-content-click="content_click_option">
          <template #activator="{ on: menu }" v-show='button.options'>
            <v-tooltip bottom >
              <template #activator="{ on: tooltip }">
                <v-btn
                  color="info"
                  icon small flat
                  v-on="{ ...tooltip, ...menu }"
                >
                  <v-icon>{{button.icon}}</v-icon>
                </v-btn>
              </template>
              <span>{{button.title}}</span>
            </v-tooltip>
          </template>
          <temmplate v-if="content_click_option"  #activator="{ on: tooltip }" v-show='!button.options'>
            <v-tooltip bottom >
              <template #activator="{ on: tooltip }">
                <v-btn
                  color="info"
                  icon small flat
                  v-on="{ ...tooltip }"
                >
                  <v-icon>{{button.icon}}</v-icon>
                </v-btn>
              </template>
              <span>{{button.title}}</span>
            </v-tooltip>
          </temmplate>
          <v-list v-show='button.options'>
            <v-list-tile
              v-for="(item, index) in button.options"
              :key="item.id"
              @click="item.options?content_click_option=false:content_click_option=true"
            >
              <v-list-tile-content>
                <v-list-tile-title v-html="item.title"></v-list-tile-title>

              </v-list-tile-content>
              <v-list-tile-action v-if='item.options'>

                 <v-menu 
        v-model="menu"
        :close-on-content-click="false"
        :nudge-width="200"
        offset-x
      >
        <template v-slot:activator="{ on }">

          <v-icon v-on="on" color='info' small @click="menu=true">fa-chevron-right</v-icon>
        </template>

        <v-card>
          <v-list>
            <v-list-tile avatar>
              <v-list-tile-avatar>
                <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John">
              </v-list-tile-avatar>

              <v-list-tile-content>
                <v-list-tile-title>John Leider</v-list-tile-title>
                <v-list-tile-sub-title>Founder of Vuetify.js</v-list-tile-sub-title>
              </v-list-tile-content>

              <v-list-tile-action>
                <v-btn
                  :class="fav ? 'red--text' : ''"
                  icon
                  @click="fav = !fav"
                >
                  <v-icon>favorite</v-icon>
                </v-btn>
              </v-list-tile-action>
            </v-list-tile>
          </v-list>

          <v-divider></v-divider>

          <v-list>
            <v-list-tile>
              <v-list-tile-action>
                <v-switch v-model="message" color="purple"></v-switch>
              </v-list-tile-action>
              <v-list-tile-title>Enable messages</v-list-tile-title>
            </v-list-tile>

            <v-list-tile>
              <v-list-tile-action>
                <v-switch v-model="hints" color="purple"></v-switch>
              </v-list-tile-action>
              <v-list-tile-title>Enable hints</v-list-tile-title>
            </v-list-tile>
          </v-list>

          <v-card-actions>
            <v-spacer></v-spacer>

            <v-btn flat @click="menu = false">Cancel</v-btn>
            <v-btn color="primary" flat @click="menu = false;">Save</v-btn>
          </v-card-actions>
        </v-card>
      </v-menu>
              </v-list-tile-action>


            </v-list-tile>
          </v-list>
        </v-menu>

    </v-toolbar>
  </v-app>
</div>


data: {
     fav: true,
    menu: false,
    message: false,
    hints: true,
    content_click_option:false,
    buttons: [
    {
      id: 'options',
      title: 'More Options',
      icon: 'fas fa-bars',
      action: '',
      options: [
        {id: 'dictionary', title: 'Dictionary', action: ''},
        {id: 'visualization', title: 'Data Visualization', action: ''},
        {id: 'password', title: 'Change Password', action: ''},
        {id: 'license', title: 'License Info', action: ''},
        {
          id: 'tools', title: 'Tools', action: '',
          options: [
            {id: 'calculator', title: 'Hex to ASCII calculator'}
          ]
        },
        {id: 'checkup', title: 'Checkup Report', action: ''},
        {id: 'system', title: 'System Monitoring', action: ''},
        {id: 'db', title: 'Database Management', action: ''},
      ]
    },
    {id: 'reports', title: 'Reports', icon: 'fas fa-chart-line', action: ''},
    {
      id: 'help',
      title: 'Help Options',
      icon: 'fas fa-question-circle',
      action: '',
      options: [
        {id: 'user', title: 'User Guide', action: ''},
        {id: 'admin', title: 'Admin Guide', action: ''},
      ]
    },
    {id: 'settings', title: 'Settings', icon: 'fas fa-cog', action: ''},
    {id: 'logout', title: 'Logout', icon: 'fas fa-power-off', action: ''},
  ]
  }