Question

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

<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>

Answer 1

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

这样的单个父标签中

为什么在v-navigation-drawer旁边不显示内容？

1 个答案: