Скрыть заголовки вкладок в vuetify - PullRequest
Новая
       6

Скрыть заголовки вкладок в vuetify

0 голосов
/ 13 января 2020

Я использую @ 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-if на v-tabs. поэтому, если есть только одна группа, v-вкладки не будут отображаться. но тогда элементы v-tabs не будут отображаться вообще. даже если я установлю свойство tab на хорошей вкладке.

есть ли какое-нибудь решение, которое даст желаемый результат?

1 Ответ

1 голос
/ 13 января 2020

Я сделал с V-шоу:

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

Надеюсь, эта помощь.

...