带有子菜单的vuetify下拉v菜单在选择时不会关闭

Question

使用Vuetify并在下拉菜单的子菜单中遇到问题。除了单击子菜单项时不会关闭的主下拉菜单以外，其他所有操作均应按预期进行。子菜单将关闭。1.点击打开下拉菜单2.悬停时打开子菜单3.如果单击主菜单项，则整个菜单将关闭。我希望它保持打开状态，因为我没有用于主菜单项的任何路由器链接，仅用于子菜单项。4.如果单击子菜单项，则会转到新页面，但主菜单不会关闭，只会关闭子菜单。必须再次在下拉框之外单击以将其关闭。

我尝试使用“单击时关闭”和“单击内容时单击关闭”但没有成功。

<v-menu offset-y :close-on-select="true">
    <v-btn flat slot="activator">
      <v-icon left>expand_more</v-icon>
      <span>Our Adventures</span>
    </v-btn>
    <v-list class="py-0">
      <v-list-tile>
        <router-link to="/adventures">
          <v-list-tile-title class="black--text plain-text">All our adventures</v-list-tile-title>
        </router-link>
      </v-list-tile>
    </v-list>
    <v-list v-for="item in items" :key="item.title" class="text-xs-left py-0">
      <v-menu offset-x right open-on-hover>
        <v-list-tile slot="activator">
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile>
        <v-list dense>
          <v-list-tile
            v-for="subItem in item.items"
            :key="subItem.title"
            @click="close"
            router
            :to="subItem.link"
          >
            <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>
    </v-list>
  </v-menu>

和相关脚本

 items: [
    {
      title: "Nordic skating",
      items: [
        { title: "Open tour", link: "/adventures/skating/weekend" },
        { title: "Private tour", link: "/adventures/skating/private" }
      ]
    },
    {
      title: "Kayak",
      items: [
        { title: "Open tour", link: "/adventures/kayak/weekend" },
        { title: "Private tour", link: "/adventures/kayak/private" }
      ]
    },
    {
      title: "Hiking",
      items: [
        { title: "Open tour", link: "/adventures/hiking/eightdays" },
        { title: "Private tour", link: "/adventures/hiking/private" }
      ]
    },
    {
      title: "Cross country skiing",
      items: [
        { title: "Open tour", link: "/adventures/skiing/weekend" },
        { title: "Private tour", link: "/adventures/skiing/private" },
        {
          title: "Winter adventures",
          link: "/adventures/skiing/adventures"
        }
      ]
    }
  ],

Answer 1

您没有提到Vuetify版本，但我认为它是1.x。这是我在项目中所做的：

• 在顶层v-menu，close-on-content-click="true"中。默认情况下，此道具为true，因此您无需添加它。
• 内部v-menu将具有open-on-hover，您的代码已具有。
• 将slot =“ activator”移动到模板。
• 在内部v-menu的激活器上，我添加了@click.stop.prevent

因此，您的代码应如下所示：

<v-menu offset-y>
  <v-btn flat slot="activator">
    <v-icon left>expand_more</v-icon>
    <span>Our Adventures</span>
  </v-btn>
  <v-list class="py-0">
    <v-list-tile>
      <router-link to="/adventures">
        <v-list-tile-title class="black--text plain-text">All our adventures</v-list-tile-title>
      </router-link>
    </v-list-tile>
  </v-list>
  <v-list v-for="item in items" :key="item.title" class="text-xs-left py-0">
    <v-menu offset-x right open-on-hover>
      <template slot="activator">
        <v-list-tile 
          @click.stop.prevent
        >
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile>
      <template>
      <v-list dense>
        <v-list-tile
          v-for="subItem in item.items"
          :key="subItem.title"
          @click="close"
          router
          :to="subItem.link"
        >
          <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-menu>
  </v-list>
</v-menu> 

旁注：slot属性在Vue 2.6中已弃用。请考虑使用v-slot指令。 https://vuejs.org/v2/guide/components-slots.html