'Vuetify - tabs with vue components

I'm working on some web design with vue.js and vuetify and has run into issues when trying to show vue components inside a vuetify v-tab.

I have the following markup inside my vue component:

<v-tabs>
    <v-tab href="#search">
        Søg
    </v-tab>
    <v-tab href="#rare">
        SU
    </v-tab>
    <v-tab href="#review">
        2019
    </v-tab>

    <v-tabs-items>
        <v-tab-item key="search">
            <ObservationSelection />
        </v-tab-item>
        <v-tab-item key="rare">
            <ObservationSu />
        </v-tab-item>
        <v-tab-item key="review">
            <ObservationAaretsGang />
        </v-tab-item>
    </v-tabs-items>
</v-tabs>

It seems that for some reason, the v-tab-item's are not properly 'connected' to the v-tabs, so I don't see any content inside each v-tab.

Each of the related component's works nicely if used outside of the v-tab.

vue.jsvuetify.js


Solution 1:[1]

Remove v-tabs-items and put the contents inside the v-tabs element.

The structure will be:

  • v-tabs
    • v-tab
    • v-tab-item

which gives us:

<v-tabs>

  <v-tab href="#search">
    Søg
  </v-tab>
  <v-tab-item value="search">
    <ObservationSelection />
  </v-tab-item>

  <v-tab href="#rare">
    SU
  </v-tab>
  <v-tab-item value="rare">
    <ObservationSu />
  </v-tab-item>

  <v-tab href="#review">
    2019
  </v-tab>
  <v-tab-item value="review">
    <ObservationAaretsGang />
  </v-tab-item>

</v-tabs>

Solution 2:[2]

This works for me

Tabs.vue

<template>
  <v-container>
    <v-card>
      <v-tabs v-model="tab" background-color="primary" dark>
        <v-tab v-for="item in items" :key="item.tab">
          {{ item.tab }}
        </v-tab>
      </v-tabs>
      <v-tabs-items v-model="tab">
        <v-tab-item v-for="item in items" :key="item.tab">
          <v-card flat>
            <v-card-text>
              <component v-bind:is="item.content"></component>
            </v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs-items>
    </v-card>
  </v-container>
</template>

<script>
import ComponentA from '@components/ComponentA';
import ComponentB from '@components/ComponentB';
export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      tab: null,
      items: [
        { tab: 'Component A', content: 'ComponentA' },
        { tab: 'Component B', content: 'ComponentB' }
      ]
    };
  }
};
</script>

Solution 3:[3]

V2 https://v2.vuetifyjs.com/en/components/tabs/

  <v-tab href="#Customer">
Customer
  </v-tab>
  <v-tab-item id="Customer" key="Customer">
      customer tab detail
  </v-tab-item>

  <v-tab href="#Supplier">
    Supplier
  </v-tab>
  <v-tab-item id="Supplier" key="Supplier">
  supplier tab detail
  </v-tab-item>

Solution 4:[4]

I stumbled upon this and I think the idea hidden here: Vuetify - tabs with vue components

Meaning we can do it in this way:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="app">
      <v-tabs v-model="tabs">
        <v-tab v-for="item in tabItems" :key="item"> {{ item }} </v-tab>
      </v-tabs>

      <v-tabs-items v-model="tabs">
        <v-tab-item> Content 1 </v-tab-item>
        <v-tab-item> Content 2 </v-tab-item>
        <v-tab-item :transition="false">
          Content 3
          <v-btn @click="tabs = 0">Link to Tab 1</v-btn>
        </v-tab-item>
      </v-tabs-items>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
    <script>
      new Vue({
        el: "#app",
        vuetify: new Vuetify(),
        data: {
          tabs: 1, // Opens Tab 2 by default. 0-indexed.
          tabItems: ["Tab 1", "Tab 2", "Tab 3"],
        },
      });
    </script>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tod
Solution 2 Raul Larriega
Solution 3 ßãlãjî
Solution 4

Related Questions