带有可扩展导航抽屉的 Vuetify 布局

Question

所以我将 Vuetify 包含在我的 Vue 项目中，并希望构建具有导航抽屉的基本布局，例如名为“Mini”here 的示例中的导航抽屉。

所以导航抽屉只显示图标，但单击它会展开以显示一些文本。你可以看到我的 当前状态here。

我现在的问题是，页面的实际内容应该放在此抽屉旁边的右侧，并在抽屉展开时改变大小。我在那里放置了一个带有文本的 div 用于测试，它总是放置在导航抽屉下方。导航抽屉也应该占据整个屏幕高度。 我在这里做错了什么？

这是组件的模板段：

<template>
  <div>
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant.sync="mini"
      permanent
    >
      <v-list-item class="px-2">
        <v-btn
            fab
            small
            onclick="window.location.href='/controlCenter'"
        >
            <v-icon>mdi-plus</v-icon>
        </v-btn>

        <v-list-item-title> Just some test stuff </v-list-item-title>

        <v-btn
          icon
          @click.stop="mini = !mini"
        >
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
      </v-list-item>

      <v-divider></v-divider>

      <v-list dense>
        <v-list-item
          v-for="(block, index) in layouts2"
          v-bind:key="`layout-button-${block._uid}`">
          <v-list-item-icon>
            <v-icon
            v-on:click="switchLayouts(block._uid)">
                mdi-home-city
            </v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title> Layout {{index + 1}} </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <div>
      normal content here
    </div>

  </div>
</template>

我也看到了同样的问题here，但如果我尝试这个，我会遇到一些错误。因此，在阅读完本文后，我测试了以下内容。但我一定是做错了什么。

<template>
  <div>
    <v-navigation-drawer
      app //use app like suggested
      v-model="drawer"
      :mini-variant.sync="mini"
      permanent
    >
      <v-list-item class="px-2">
        <v-btn
            fab
            small
            onclick="window.location.href='/controlCenter'"
        >
            <v-icon>mdi-plus</v-icon>
        </v-btn>

        <v-list-item-title> Just some test stuff </v-list-item-title>

        <v-btn
          icon
          @click.stop="mini = !mini"
        >
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
      </v-list-item>

      <v-divider></v-divider>

      <v-list dense>
        <v-list-item
          v-for="(block, index) in layouts2"
          v-bind:key="`layout-button-${block._uid}`">
          <v-list-item-icon>
            <v-icon
            v-on:click="switchLayouts(block._uid)">
                mdi-home-city
            </v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title> Layout {{index + 1}} </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-content>  // use v-content like suggested
      <p>Hi</p>
    </v-content>
  </div>
</template>

错误是

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook: "TypeError: Cannot read property 'register' of undefined" & [Vue warn]: Error in render: "TypeError: Cannot read property 'bar' of undefined" & [Vue warn]: Error in callback for watcher "isActive": "TypeError: Cannot read property 'register' of undefined" 其中一些还会出现多次。

感谢您的帮助！

Answer 1

我能够通过简单地将导航抽屉移出组件并直接在 App.vue 文件中使用它来解决这个问题。