Элементы в подгруппе списка Vuetify, не складывающиеся вертикально

Question

Я взял на себя приложение Vue (2.5.22) с Vuetify (1.4.3), и приложение имеет левую навигационную панель, которая использует элементы 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> компонент:

<template>
  <v-navigation-drawer
    v-model="visible"
    fixed
    app
    dark
    class="primary"
  >
    <v-toolbar flat class="ap-img-toolbar">
      <v-list class="pa-0">
        <v-list-tile>
          <v-list-tile-action>
            <img src="/images/LogoSmall.png">

          </v-list-tile-action>
        </v-list-tile>
      </v-list>
    </v-toolbar>

    <TheLeftSidebarAppList />

  </v-navigation-drawer>
</template>

Answer 1

Удалите slot="activator" из <v-list-tile>, содержащего детей, и это позаботится о горизонтальной проблеме.

Я создал рабочий Codepen на вашем примере.

Надеюсь, это поможет:)