带有子项的 Vuejs 侧边栏菜单

Question

我正在尝试使用 vuejs 和 vuenotify 动态创建侧边栏菜单。

我在 vuetify 网站上看到了一个示例，使用如下所示。

这段代码的问题在于，它总是在项目标题的末尾显示附加图标“>”。

我想显示附加图标“>”，前提是我有子项。 我创建了一个名为“Manuutenção”的项目，其中包含子项目。没有其他有子项目。 然后，我只想要“Manutençao”项目或其他（如果我使用子项目创建）显示“>”。

可以解决吗？

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

        <v-list-item
          v-for="subItem in item.items"
          :key="subItem.title"
          link
          router
          :to="subItem.to"
        >
          <v-list-item-content>
            <v-list-item-title v-text="subItem.title"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-group>
    </v-list>

export default {
  name: "DashboardCoreDrawer",
data: () => ({
    items: [
      {
        icon: "mdi-view-dashboard",
        title: "Dashboard",
        to: "/",
      },
      {
        icon: "mdi-account",
        title: "Usuários",
        to: "/usuarios",
      },
      {
        title: "Clientes",
        icon: "mdi-map-marker",
        to: "/clientes",
      },
      {
        title: "Manutenção",
        icon: "mdi-clipboard-outline",
        to: "",
        items: [
          {
            title: "Convênios",
            icon: "mdi-clipboard-outline",
            to: "/convenios",
          },
          {
            title: "Planos",
            icon: "mdi-format-font",
            to: "/planos",
          },
        ],
      },
      {
        title: "Convênios",
        icon: "mdi-clipboard-outline",
        to: "/convenios",
      },
      {
        title: "Planos",
        icon: "mdi-format-font",
        to: "/planos",
      },
      {
        title: "Tabelas",
        icon: "mdi-chart-bubble",
        to: "/tabelas",
      },
      {
        title: "Atendimento",
        icon: "mdi-bell",
        to: "atendimentos",
      },
    ],
  }),
}

其他信息： 可以对两个或三个子菜单项进行调整。示例：

items:[
{
        title: "Manutenção",
        icon: "mdi-clipboard-outline",
        to: "",
        items: [
          {
            title: "Convênios",
            icon: "mdi-clipboard-outline",
            to: "/convenios",
          },
          {
            title: "Planos",
            icon: "mdi-format-font",
            to: "",
            items: [
              {
                title: "Test1,
                icon: "mdi-chart-bubble",
                to: "/test1",
              },
              {
                title: "Test2",
                icon: "mdi-chart-bubble",
                to: "/test2",
              },
            ],
          },
] 

“Planos”处的图标

Answer 1

主要技巧是当 item 有子项时渲染 v-list-group ，否则渲染 v-list-item 。请参阅下面的示例：

<template>
    <v-list>
      <template v-for="item in items">
        <v-list-group
          :key="item.title"
          v-if="item.items !== undefined"
          v-model="item.active"
          no-action
        >
          <template v-slot:activator>
            <v-list-item-avatar left>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-avatar>

            <v-list-item-content>
              <v-list-item-title v-text="item.title"></v-list-item-title>
            </v-list-item-content>
          </template>

          <v-list-item
            v-for="subItem in item.items"
            :key="subItem.title"
            link
            router
            :to="subItem.to"
          >
            <v-list-item-avatar left>
              <v-icon>{{ subItem.icon }}</v-icon>
            </v-list-item-avatar>
            <v-list-item-content>
              <v-list-item-title v-text="subItem.title"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-group>
        <v-list-item v-else :key="item.title" link router :to="item.to">
          <v-list-item-avatar left>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title v-text="item.title"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </template>
    </v-list>
</template>

已编辑：

对于多级解决方案，基本上，您必须为列表项创建一个组件并将其递归导入到自身中。类似的东西：

mainlist.vue

<template>
  <div>
    <v-list>
      <list-item v-for="item in items" :item="item" :key="item.title">
      </list-item>
    </v-list>
  </div>
</template>

<script>
export default {
  name: "DashboardCoreDrawer",
  components: {
    ListItem: () => import("./listitem.vue"),
  },
  data: () => ({
    items: [
      {
        title: "Convênios",
        icon: "mdi-clipboard-outline",
        to: "/convenios",
      },
      {
        title: "Planos",
        icon: "mdi-format-font",
        items: [
          {
            title: "Test1",
            icon: "mdi-chart-bubble",
            items: [
              {
                title: "Test4",
                icon: "mdi-chart-bubble",
                to: "/test1",
              },
              {
                title: "Test5",
                icon: "mdi-chart-bubble",
                to: "/test2",
              },
            ],
          },
          {
            title: "Test2",
            icon: "mdi-chart-bubble",
            to: "/test2",
          },
        ],
      },
    ],
  }),
};
</script>

listitem.vue

<template>
  <div>
    <v-list-group
      v-if="item.items !== undefined"
      v-model="item.active"
      no-action
      :sub-group="isSubGroup"
      :class="isSubGroup ? 'right-icon' : ''"
    >
      <template v-slot:activator>

        <v-list-item-content>
          <v-list-item-title>
              <v-icon>{{ item.icon }}</v-icon>{{ item.title }}
          </v-list-item-title>
        </v-list-item-content>
      </template>
      <template v-for="subItem in item.items">
        <list-item :item="subItem" :is-sub-group="true" :key="subItem.title">
        </list-item>
      </template>
    </v-list-group>
    <v-list-item v-else link router :to="item.to">
      <v-list-item-avatar left>
        <v-icon>{{ item.icon }}</v-icon>
      </v-list-item-avatar>
      <v-list-item-content>
        <v-list-item-title v-text="item.title"></v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </div>
</template>
<script>
export default {
  name: "listitem",
  props: ["item", "isSubGroup"],
  components: {
    ListItem: () => import("./listitem.vue"),
  },
};
</script>
<style>
 .right-icon .v-list-group__header {
  display: flex !important;
  flex-direction: row-reverse !important;
 }
</style>