Ich habe thisv-tabs
Komponente auf einer Seite hinzugefügt.Wie kann ich diese v-tabs Vuetify.js Komponente funktionieren lassen?
Im Beispiel gibt es nur 1 Block von Daten (text
) zur Komponente binded (alle drei Registerkarten angezeigt werden diese text
Daten):
<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>
Wie kann ich einen eigenen Satz von Daten in den einzelnen Registerkarten angezeigt werden?
Vielen Dank, jetzt verstehe ich, wie Tabs mit einer Schleife arbeiten. Ich konnte vorher nicht recht verstehen, wie ich die ID benutzen sollte. Vielen Dank – Un1