Vuetify：在工具栏下方添加标签不起作用答案

【问题标题】：Vuetify : Adding tabs below toolbar not workingVuetify：在工具栏下方添加标签不起作用
【发布时间】：2017-10-15 14:46:53
【问题描述】：

我想使用 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 有人能告诉我为什么吗？

【问题讨论】：

取决于您的 vuejs / vuetify 版本，这可能是因为您没有将其包装在 v-app 中。见vuetifyjs.com/layout/pre-defined
vuejs：2.9.1 vuetify：0.16.7
但是 afaik vue 最新版本是 2.5.2。你是来自未来还是我错过了什么？
我是通过Mac安装的，最新版本是2.9.1
您是否按照我的建议尝试将其包装在 v-app 中？如果你这样做了会发生什么？可以更新代码吗？

标签： vue.js vuetify.js

【解决方案1】：

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

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

【讨论】：