在 vuetify 中隐藏选项卡标题答案

【问题标题】：Hide tab headers in vuetify在 vuetify 中隐藏选项卡标题
【发布时间】：2020-01-13 13:36:22
【问题描述】：

我正在使用 @nuxtjs/vuetify 和 nuxt.js 作为组合。我在我的页面中使用组件 v-tabs 和 v-tabs-items 作为分组设置。

我想要实现的目标很简单，但我找不到解决方案。如果只有一组设置。我不想显示标签页眉。如果有多组设置。然后可能会显示选项卡标题。

那么现在的代码是什么：

<v-tabs v-model="tab"> <!-- GROUPED SETTINGS ORDERED IN TABS -->
     <v-tab class="mx-4" v-for="(tab, index) in Object.keys(content_fields)" :key="index">{{ tab }}</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
  <v-tab-item>
     <!-- item -->
  </v-tab-item>
</v-tabs-items>

我试图在 v-tabs 上做一个 v-if。因此，如果只有一组，则不会显示 v-tabs。但随后 v-tabs-items 根本不会显示。即使我在好选项卡上设置了选项卡属性。

是否有任何解决方案可以提供我想要的结果？

【问题讨论】：

当你只有一项的时候，你还记得把tab变量/v-model设置为tab键吗？

标签： vue.js vuetify.js

【解决方案1】：

我用 v-show 做了：

HTML：

<div id="app">
  <v-app id="inspire">
    <v-tabs>
      <v-tab v-show="tabs.length > 1" v-for="i in tabs" :key="i.name" :href="`#tab-${i.name}`"> {{ i.text }} </v-tab>

      <v-tab-item v-for="i in tabs" :key="i.name" :value="'tab-' + i.name">
        <v-card flat tile>
          <v-card-text>{{ i.text }}</v-card-text>
        </v-card>
      </v-tab-item>
    </v-tabs>
  </v-app>
</div>

JS：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
      return {
        tabs: [
          { name: 1, text: 'One' },
          //{ name: 2, text: 'Two' }
        ]
      }
    }
})

在这里你可以看到现场演示：https://codepen.io/ljcordero/pen/wvBXqWv

希望对您有所帮助。

【讨论】：

谢谢！帮助很大