时间戳

首页 > 解决方案 > 为什么不显示 v-navigation-drawer 旁边的内容？

vue.js - 为什么不显示 v-navigation-drawer 旁边的内容？

问题描述

我正在尝试在左侧设置导航抽屉，在右侧设置内容。这个模板是从路由器视图中调用的（不确定这是否有区别）。抽屉式导航完美显示，但“此处的内容”部分未显示。它不仅不显示，而且我不相信它甚至不存在于文档中的任何地方。我究竟做错了什么？

<template>
  <v-navigation-drawer
        :clipped="true"
        enable-resize-watcher
        width="200"
        style="background-color:#e7e8ea"
  >
    <v-toolbar class="background darken-1" flat>
      <v-list>
        <v-list-tile>
          <v-list-tile-title class="title justify-center">
            Subjects
          </v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-toolbar>
    <v-divider></v-divider>
    <v-list>
      <v-list-tile
          v-for="subject in subjects"
          :key="subject.id"
          class="primary--text"
          :active="currentSubject==subject"
          active-class="active blue"
          v-on:click="selectSubject(subject)"
      >
        <v-list-tile-content>
          <v-list-tile-title >{{ subject.name }} {{currentSubject==subject}}</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile >
      <v-list-tile-title class="mt-3">
        <v-list-tile-content style="align-items: center">
          <addStationRotationsSubjectDialog v-on:subject-added="selectLatestSubject()" :teacher="teacher" :selectedClass="selectedClass"></addStationRotationsSubjectDialog>
        </v-list-tile-content>
      </v-list-tile-title>
    </v-list>
  </v-navigation-drawer>
  <v-content>
    <v-container fluid>
      Content here
    </v-container>
  </v-content>
</template>

标签： vue.jsvuetify.js

解决方案

您不能在模板的根目录中使用多个 html 元素。vuejs 只允许一个根元素，因此将您的 html 包装在 div 标签或单个父标签中，例如<v-layout></v-layout>

推荐阅读