2017-12-31 11 views
0

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?

Antwort

1

Wenn Sie alles wollen weg in den data Abschnitt abstrahiert werden, dann können Sie so etwas wie dieses https://codepen.io/anon/pen/Leyoqz tun:

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

Oder, wenn Sie es dynamisch sein nicht brauchen, dann können Sie einfach codieren es ist alles in so:

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

+0

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

Verwandte Themen