v-list-item-title未显示标题vuetify

Question

我正在使用Vuetify示例项目作为参考，以了解如何创建带有子项的v-list并在v-navigation-drawer中用作“菜单”。

列表中的项目显示图标，但不显示文本。 子项似乎正常工作。

我已将所有插件更新为最新版本（包括Vue和Vuetify）

<template>
  <v-app>
    <v-app-bar app>
      <v-app-bar-nav-icon
        @touchend.prevent.native="drawer = !drawer"
        @click.stop="drawer = !drawer"
     />
      <v-toolbar-title class="headline text-uppercase">
        <span>LOGBOOK: </span>
        <span class="font-weight-light">
          {{ companyName }}
        </span>
      </v-toolbar-title>
      <v-spacer />
      <v-btn
        text
        href="login.html"
      >
        <span class="mr-2">
          Login
        </span>
      </v-btn>
      <v-menu
        left
        bottom
      >
        <template v-slot:activator="{ on }">
          <v-btn
            icon
            v-on="on"
          >
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="n in 5"
            :key="n"
            @click="() => {}"
          >
            <v-list-item-title>Option {{ n }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>
    <v-navigation-drawer
      v-model="drawer"
      app
      absolute
      temporary
>
  <v-list-item>
    <v-list-item-avatar>
      <v-img src='../../../src/assets/LP.jpg' />
    </v-list-item-avatar>

    <v-list-item-content>
      <v-list-item-title> {{ UserName }}</v-list-item-title>
    </v-list-item-content>
  </v-list-item>

  <v-divider />

  <v-list dense>
    <v-list-group
      v-for="item in items"
      :key="item.title"
      v-model="item.active"
      :prepend-icon="item.action"
      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"
            @click=""
          >
            <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>
    </v-navigation-drawer>
  </v-app>
</template>


export default {
  name: 'App',
  data: () => ({
    companyName: 'POTGIETER LANDBOU PETRUS STEYN',
    UserName: 'Louwrens Potgieter',
    drawer: null,
    items: [
        {
          action: 'local_activity',
          title: 'Attractions',
          items: [
            { title: 'List Item' },
          ],
        },
        {
      action: 'restaurant',
      title: 'Dining',
      active: true,
      items: [
        { title: 'Breakfast & brunch' },
        { title: 'New American' },
        { title: 'Sushi' },
      ],
    },
    {
      action: 'school',
      title: 'Education',
      items: [
        { title: 'List Item' },
      ],
    },
    {
      action: 'directions_run',
      title: 'Family',
      items: [
        { title: 'List Item' },
      ],
    },
    {
      action: 'healing',
      title: 'Health',
      items: [
        { title: 'List Item' },
      ],
    },
    {
      action: 'content_cut',
      title: 'Office',
      items: [
        { title: 'List Item' },
      ],
    },
    {
      action: 'local_offer',
      title: 'Promotions',
      items: [
        { title: 'List Item' },
      ],
    },
  ],
  })
}
</script>

预期结果：列表项中图标旁边显示的文本