Question

我已经使用Vuetify（1.4.3）接管了Vue（2.5.22）应用程序，并且该应用程序的左导航使用了catalina 6.0.53和v-list元素：

v-list-group

<template>
  <v-list dark class="ap-sidebar-applist">
    <v-list-group
      class="ap-sidebar-group"
      v-for="(item, i) in items"
      :key="i"
      :prepend-icon="item.icon"
      :value="item.visible"
      @click="onClick(item)"
    >
      <v-list-tile slot="activator">
        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
      </v-list-tile>

      <v-list-group
        v-if="item.children"
        sub-group
        no-action
        class="ap-sidebar-subgroup"
      >
        <v-list-tile slot="activator"
          v-for="(subMenu, j) in item.children"
          :key="j"
          @click="onClick(subMenu, true)"
        >
          <v-list-tile-action>
            <v-icon>{{ subMenu.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-title>{{ subMenu.title }}</v-list-tile-title>
        </v-list-tile>
      </v-list-group>

    </v-list-group>
  </v-list>
</template>

我想通过在数据中添加export default { name: 'TheLeftSidebarAppList', props: { visible: Boolean, }, data: () => ({ items: [ { icon: 'group', title: 'Users', routeTo: 'UserEdit', method: null, superOnly: false, taCanView: true, visible: true, children: [ { icon: 'send', title: 'Send Quick Alert', method: 1, }, ], }, { icon: 'domain', title: 'Tenants', routeTo: 'TenantEdit', method: null, superOnly: false, taCanView: true, visible: false, children: [ { icon: 'fingerprint', title: 'Manage Biometrics', method: 1, }, { icon: 'email', title: 'Manage Templates', method: 1, }, ], }, { icon: 'assessment', title: 'Reports', routeTo: 'WorkspaceReports', method: null, superOnly: false, taCanView: true, visible: false, }, { icon: 'settings', title: 'Server Configuration', routeTo: null, method: 2, superOnly: false, taCanView: false, visible: false, }, { icon: 'trending_up', title: 'Performance', routeTo: 'WorkspacePerformance', method: null, superOnly: true, taCanView: true, visible: false, }, ], }), }数组在Tenants项下添加两项：

children

但在显示时，子项将水平显示，而不是垂直堆叠：

从我所看到的所有内容来看，它们应该垂直堆叠，但事实并非如此。我该怎么做才能使它们垂直堆叠？

更新：此组件包含在将其包装在{ icon: 'domain', title: 'Tenants', routeTo: 'TenantEdit', method: null, superOnly: false, taCanView: true, visible: false, children: [ { icon: 'fingerprint', title: 'Manage Biometrics', method: 1, }, { icon: 'email', title: 'Manage Templates', method: 1, }, ], },组件中的父组件中：

<v-navigation-drawer>

Answer 1

从slot="activator"中删除包含孩子的<v-list-tile>，这将解决水平问题。

我使用您的示例创建了一个有效的Codepen。

希望它会有所帮助：）

Vuetify列表子组中的项目未垂直堆叠

1 个答案: