Html v-list-组未与列表中的v-list-item对齐

我有一个带有列表的导航抽屉，其中部分项目有子列表。 我不明白为什么我的v-list-group没有与列表项正确对齐。 我试着用

class=“v-list-item”

来修复它，但它不起作用 主项和统计项为v-list-item，报告为v-list-group，其中包含v-list-items

相关模板：

    <v-navigation-drawer
      v-model="sidebarMenu"
      app
      floating
      :permanent="sidebarMenu"
      :mini-variant.sync="mini"
      color="grey darken-4"
    >
      <v-list dense>
        <v-list-item>
          <v-list-item-action>
            <v-icon @click.stop="sidebarMenu = !sidebarMenu">mdi-chevron-left</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
      <v-divider></v-divider>
      <v-list>
        <div v-for="(link, i) in links" :key="link.title">
          <v-list-item v-if="!link.subLinks" :key="i" :to="link.href" class="v-list-item">
            <v-list-item-icon>
              <v-icon color="primary">{{ link.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title class="primary--text">
                {{
                link.title
                }}
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>

          <v-list-group v-else :key="link.title" no-action>
            <template v-slot:activator>
              <v-list-item>
                <v-list-item-icon>
                  <v-icon color="primary">{{ link.icon }}</v-icon>
                </v-list-item-icon>

                <v-list-item-content>
                  <v-list-item-title class="primary--text">
                    {{
                    link.title
                    }}
                  </v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </template>

            <v-list-item v-for="sublink in link.subLinks" :to="sublink.href" :key="sublink.title">
              <v-list-item-content>
                <v-list-item-title class="primary--text">
                  {{
                  sublink.title
                  }}
                </v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-group>
        </div>
      </v-list>
    </v-navigation-drawer>

data: () => ({
    links: [
      {
        title: "Home",
        href: "/",
        icon: "mdi-home-outline"
      },
      {
        icon: "mdi-file-chart",
        title: "Reports",
        subLinks: [
          {
            title: "Sales",
            href: "/sales"
          },
          {
            title: "Orders",
            href: "/orders"
          },
          {
            title: "Inventory",
            href: "/inventory"
          }
        ]
      },
      {
        title: "Statistics",
        href: "/statistics",
        icon: "mdi-chart-bar"
      }
    ],

编辑：

    <v-navigation-drawer
      v-model="sidebarMenu"
      app
      floating
      :permanent="sidebarMenu"
      :mini-variant.sync="mini"
      color="grey darken-4"
    >
      <v-list dense>
        <v-list-item>
          <v-list-item-action>
            <v-icon @click.stop="sidebarMenu = !sidebarMenu">mdi-chevron-left</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
      <v-divider></v-divider>
      <v-list>
        <div v-for="(link, i) in links" :key="link.title">
          <v-list-item v-if="!link.subLinks" :key="i" :to="link.href" class="v-list-item">
            <v-list-item-icon>
              <v-icon color="primary">{{ link.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title class="primary--text">
                {{
                link.title
                }}
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>

          <v-list-group v-else :key="link.title" no-action>
            <template v-slot:activator>
              <v-list-item>
                <v-list-item-icon>
                  <v-icon color="primary">{{ link.icon }}</v-icon>
                </v-list-item-icon>

                <v-list-item-content>
                  <v-list-item-title class="primary--text">
                    {{
                    link.title
                    }}
                  </v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </template>

            <v-list-item v-for="sublink in link.subLinks" :to="sublink.href" :key="sublink.title">
              <v-list-item-content>
                <v-list-item-title class="primary--text">
                  {{
                  sublink.title
                  }}
                </v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-group>
        </div>
      </v-list>
    </v-navigation-drawer>

data: () => ({
    links: [
      {
        title: "Home",
        href: "/",
        icon: "mdi-home-outline"
      },
      {
        icon: "mdi-file-chart",
        title: "Reports",
        subLinks: [
          {
            title: "Sales",
            href: "/sales"
          },
          {
            title: "Orders",
            href: "/orders"
          },
          {
            title: "Inventory",
            href: "/inventory"
          }
        ]
      },
      {
        title: "Statistics",
        href: "/statistics",
        icon: "mdi-chart-bar"
      }
    ],

我按照@IVO GELOV的建议将v-list更改为v-tree-view， 看起来确实更好。

我现在的小问题是，我必须点击文本本身进行路由。 如何使所有路由器链接行可单击

<v-treeview :items="items" open-on-click item-key="name" activatable class="primary--text">
        <template slot="label" slot-scope="props">
          <v-icon color="primary" v-text="props.item.icon" class="pr-2"></v-icon>
          <router-link
            style="text-decoration: none"
            :to="props.item.href"
            v-if="props.item.href"
          >{{ props.item.name }}</router-link>
          <span v-else>{{ props.item.name }}</span>
        </template>
      </v-treeview>

<script>
export default {
  data: () => ({
    items: [
      {
        id: 0,
        name: "Home",
        icon: "mdi-home-outline",
        href: "/"
      },
      {
        id: 1,
        name: "Reports",
        icon: "mdi-file-chart",
        children: [
          {
            id: 2,
            name: "Sales",
            href: "/sales"
          },
          {
            id: 3,
            name: "Orders",
            href: "/orders"
          },
          {
            id: 4,
            name: "Inventory",
            href: "/inventory"
          }
        ]
      }
    ]
  })
};
</script>

{{props.item.name}
{{props.item.name}
导出默认值{
数据：（）=>({
项目：[
{
id:0，
姓名：“家”，
图标：“mdi主轮廓”，
href:“/”
},
{
id:1，
名称：“报告”，
图标：“mdi文件图表”，
儿童：[
{
id:2，
名称：“销售”，
href:“/sales”
},
{
id:3，
名称：“订单”，
href:“/订单”
},
{
id:4，
名称：“库存”，
href:“/inventory”
}
]
}
]
})
};

也许你可以做一个快速破解，比如制作一个空的“v-list-item-icon”标签，这样它就可以在你的标题前占据一些空间了

<v-list-item v-for="sublink in link.subLinks" :to="sublink.href" :key="sublink.title">
    <v-list-item-icon></v-list-item-icon>  //Empty Icon

    <v-list-item-content>
        <v-list-item-title class="primary--text">
           {{ sublink.title }}
        </v-list-item-title>
    </v-list-item-content>
</v-list-item>

//空图标
{{sublink.title}

也许你可以做一个快速破解，比如制作一个空的“v-list-item-icon”标签，这样它就可以在你的标题前占据一些空间了

<v-list-item v-for="sublink in link.subLinks" :to="sublink.href" :key="sublink.title">
    <v-list-item-icon></v-list-item-icon>  //Empty Icon

    <v-list-item-content>
        <v-list-item-title class="primary--text">
           {{ sublink.title }}
        </v-list-item-title>
    </v-list-item-content>
</v-list-item>

//空图标
{{sublink.title}
< /代码>您可能想考虑使用层次结构侧栏的<代码> <代码>。看起来好多了-谢谢，我编辑了这个问题@IVO GELOVYou可能想考虑使用层次结构侧边栏使用<代码> <代码>。看起来好多了-谢谢，我编辑了这个问题@伊沃·盖洛夫