How can I make this v-tabs Vuetify.js component work?
12,561
Solution 1
If you want everything to be abstracted away into the data
section then you can do something like this https://codepen.io/anon/pen/Leyoqz :
<template>
<v-tabs fixed centered>
<v-tabs-bar class="cyan" dark>
<v-tabs-slider class="yellow"></v-tabs-slider>
<v-tabs-item
v-for="item in items"
:key="item.id"
:href="'#tab-' + item.id"
>
{{ item.title }}
</v-tabs-item>
</v-tabs-bar>
<v-tabs-items>
<v-tabs-content
v-for="item in items"
:key="item"
:id="'tab-' + item.id"
>
<v-card flat>
<v-card-text>{{ item.text }}</v-card-text>
</v-card>
</v-tabs-content>
</v-tabs-items>
</v-tabs>
</template>
<script>
export default {
data () {
return {
items: [
{
title: "First Item",
text: "This is the first text",
id: 1
},
{
title: "Second Item",
text: "This is the second text",
id: 2
},
{
title: "Third Text",
text: "This is the third text",
id: 3
},
]
}
}
}
</script>
Or, if you don't need it to be dynamic, then you can just hardcode it all in like this:
<v-tabs fixed centered>
<v-tabs-bar class="cyan" dark>
<v-tabs-slider class="yellow"></v-tabs-slider>
<v-tabs-item href="#tab-1">
Tab One
</v-tabs-item>
<v-tabs-item href="#tab-2">
Tab Two
</v-tabs-item>
<v-tabs-item href="#tab-3">
Tab Three
</v-tabs-item>
</v-tabs-bar>
<v-tabs-items>
<v-tabs-content id="tab-1">
<v-card flat>
<v-card-text>This is the first tab</v-card-text>
</v-card>
</v-tabs-content>
<v-tabs-content id="tab-2">
<v-card flat>
<v-card-text>This is the second tab</v-card-text>
</v-card>
</v-tabs-content>
<v-tabs-content id="tab-3">
<v-card flat>
<v-card-text>This is the third tab</v-card-text>
</v-card>
</v-tabs-content>
</v-tabs-items>
Solution 2
For using custom components inside each tab in vuetify in 2020 use:
<v-container>
<v-tabs centered>
<v-tabs-slider/>
<v-tab>Tab1</v-tab>
<v-tab>Tab2</v-tab>
<v-tab>Tab3</v-tab>
<v-tab-item>
<MyView1 />
</v-tab-item>
<v-tab-item>
<MyView2 />
</v-tab-item>
<v-tab-item>
<MyView3 />
</v-tab-item>
</v-tabs>
</v-container>
Solution 3
you can also use dynamic component
tab content binding. which gives you more flexibility and control.
Author by
Un1
Updated on June 25, 2022Comments
-
Un1 almost 2 years
I have this
v-tabs
component added on a page.In the example there's only 1 block of data (
text
) binded to the component (all 3 tabs display thistext
data):<template> <v-tabs fixed centered> <v-tabs-bar class="cyan" dark> <v-tabs-slider class="yellow"></v-tabs-slider> <v-tabs-item v-for="i in items" :key="i" :href="'#tab-' + i" > {{ i }} </v-tabs-item> </v-tabs-bar> <v-tabs-items> <v-tabs-content v-for="i in items" :key="i" :id="'tab-' + i" > <v-card flat> <v-card-text>{{ text }}</v-card-text> </v-card> </v-tabs-content> </v-tabs-items> </v-tabs> </template> <script> export default { data () { return { items: ['Item One', 'Item Seventeen', 'Item Five'], text: 'Lorem ipsum dolor sit amet, consectetur' } } } </script>
How do I display a separate block of data in each tab?
-
Un1 over 6 yearsThank you very much, now I understand how tabs work with a loop. I couldn't quite get how to use the id, before. Thanks
-
ramijames about 4 yearsJesus, why was it so hard to find a simple example that actually worked? Thanks.
-
kamasuPaul over 2 yearsthis needs to be added in the vuetify docs