このv-tab Vuetify.jsコンポーネントはどのように動作させることができますか？

Question

私はthisv-tabsコンポーネントをページに追加しました。

例ではコンポーネントにバインドされるデータのわずか1ブロック（text）は、（すべての3つのタブがこの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> 

私は、各タブでデータの別のブロックを表示するにはどうすればよいですか？

Answer 1

あなたはすべてがdataセクションに抽象化したいなら、あなたはこの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> 

それとも、あなたが動的にすることを必要としない場合は、あなただけのハードコーディングすることができますがそれは、このようなすべてで：

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