Vuetify：在工具栏下方添加选项卡不起作用

Question

我想使用 vuetify 在顶部添加工具栏，从而添加选项卡和贪婪列表。当涉及到我下面的代码的实现时，我发现只显示了工具栏，但是选项卡。你能告诉我我还需要做什么吗？

我的nvm是8.4.0 vuetify 很好，但是当涉及到将所有组件集成在一起时……它似乎不起作用……我该怎么办？

这是我的代码

<template>
  <div id="app"> 


   <v-app>
  <v-toolbar>
      <v-toolbar-side-icon></v-toolbar-side-icon> 
    <v-toolbar-title>Vuetify Mental Shop</v-toolbar-title>

    <v-spacer></v-spacer>

    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn icon>
            <v-icon>search</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>favorite</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>more_vert</v-icon>
          </v-btn>
    </v-toolbar-items>
  </v-toolbar>
  <main>
    <v-content>
      <v-container fluid>
        <router-view></router-view>

 <v-layout>
    <v-flex >
      <v-card>      
        <v-container fluid v-bind="{ [`grid-list-${sx}`]: true }">
          <v-layout row wrap>
            <v-flex
              xs4
              v-for="n in 9"
              :key="n"
            >
              <v-card flat tile>
                <v-card-media
                  :src="`http://rcfurniture.com/wp-content/uploads/Boris-metal-base-Chair-Swivel-Chair-1-560x353.jpg`"
                  height="100px"
                >
                </v-card-media>
              </v-card>
            </v-flex>
          </v-layout>
        </v-container>
      </v-card>
    </v-flex>
  </v-layout>


      </v-container>
    </v-content>
  </main>  
  <v-footer app></v-footer>
</v-app>

  </div>

</template>



<script>
export default {
  name: 'app',
  data () {
    return {
      size: 'sm',
      items: [
        { text: 'Extra small (1px)', value: 'xs' },
        { text: 'Small (4px)', value: 'sm' },
        { text: 'Medium (8px)', value: 'md' },
        { text: 'Large (16px)', value: 'lg' },
        { text: 'Extra large (24px)', value: 'xl' }
      ]
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}
</style>

顺便说一句，它适用于 https://codepen.io/anon/pen/NaEGox 谁能告诉我为什么？

Answer 1

根据您的 vuejs / vuetify 版本，可能是因为您没有将其包装在 v-app 中。有关详细信息，请参阅 docs

<div id="app"> 
  <v-app>
    //...
  </v-app>
</div>

Vuetify：在工具栏下方添加选项卡不起作用

Vuetify : Adding tabs below toolbar not working

vue.js

vuetify.js