J'ai ce composantv-tabs
ajouté sur une page.
Dans l'exemple, un seul bloc de données (text
) est lié au composant (les 3 onglets affichent ces données text
):
<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>
Comment afficher un bloc de données séparé dans chaque onglet?
Si vous voulez que tout soit résumé dans la section data
, vous pouvez faire quelque chose comme ceci 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>
Ou, si vous n'en avez pas besoin pour être dynamique, vous pouvez simplement le coder en dur comme ceci:
<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>
vous pouvez également utiliser la liaison de contenu de l'onglet dynamic component
. ce qui vous donne plus de flexibilité et de contrôle.