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

Question

所以我在我的Vue项目中加入了Vuetify，并想建立我的基本布局，其中包括一个导航抽屉，就像例子中的 "迷你"。此处.

所以导航抽屉只显示图标，但点击后也会展开显示一些文字。你可以看到我现在的状态 此处.

我现在的问题是，页面的实际内容应该放在这个抽屉旁边的右侧，并且在抽屉展开时改变大小。我在那里放置了一个带有文本的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>

我也看到了这个问题 此处 但如果我尝试这样做，我得到了不少错误。所以在看完这个之后，我测试了以下内容。但我一定是做错了什么。

<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" ＆amp; [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"有的还出现多次。

谢谢您的帮助！所以我在我的Vue项目中加入了Vuetify，并想建立我的基本布局，像这里的例子 "迷你 "一样。

Answer 1

我能够解决这个问题的方法是将导航抽屉从组件中移出，而直接在App.vue文件中使用它。