[Vuejs]-Change current component content depending on selected tab

by

0👍

Try using something along the lines of a method.

Depending on what i returns you have to change some things, like the v-if. There is a lot of ways to do what you want, I have given you a very bread and butter answer to get you into the right direction.

<v-tabs v-model="tab" class="elevation-2" dark :centered="true" :grow="true">
    <v-tabs-slider></v-tabs-slider>
    <v-tab v-for="i in tabs" :key="i" :href="`#tab-${i}`" @click="tabs(i)">{{ i }}</v-tab>
</v-tabs>
 <div>
     <!-- Change selected component according to selected tab -->
   <div v-if="selectedTab === 1">
    <ChildComponentOne/>
   </div>
   <div v-if="selectedTab === 2">
    <ChildComponentTwo/>
   </div>
   <div v-if="selectedTab === 3">
    <ChildComponentThree/>
   </div>
 </div>


<script>
data() {
    return {
      tabs: ["ChildOne", "ChildTwo", "ChildThree"],
      selectedTab: null,
    };
  },
methods: {
    tabs(tab) {
      this.selectedTab = tab
    },
}
</script>

0👍

Id recommend keeping to the scope of the vuetify component. The documentation shows that you have three components you can use for this base tabs component. tabs, tab and tab-item

So you can do something like this with an list of Objects and dynamic components:
https://v2.vuejs.org/v2/guide/components-dynamic-async.html

<v-tabs v-model="tab" class="elevation-2" dark :centered="true" :grow="true">
    <v-tabs-slider></v-tabs-slider>
    <v-tab v-for="(item, index) in tabs" :key="index" :href="`#tab-${index}`">{{ item.name }}</v-tab>

 <v-tab-item v-for="(item, i) in tabs" :key="index" :value="'tab-' + index">
     <Component :is="item.component"></Component>
 </v-tab-item>

</v-tabs>

<script>
// Import your childcomponents
data() {
    return {
    tabs: [
    { name: "ChildOne", component: "ChildComponentOne" },
    { name: "ChildTwo", component: "ChildComponentTwo" },
    { name: "ChildThree", component: "ChildComponentThree" },
    ],
  },
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

I haven’t tested this code but i think you get the idea

Leave a comment