Vuetify - tabs with vue components

Question

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.

Answer 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>

Answer 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>