[Vuejs]-Hide tab headers in vuetify

by

2👍

✅

I did with 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' }
        ]
      }
    }
})

Here you can see the live demo: https://codepen.io/ljcordero/pen/wvBXqWv

Hope this help.

Leave a comment