web-dev-qa-db-fra.com

Comment puis-je faire fonctionner ce composant Vuetify.js v-tabs?

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?

vue.jsvuejs2vue-componentvuetify.js
3
Un1

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>

3
Chase Roberts

vous pouvez également utiliser la liaison de contenu de l'onglet dynamic component. ce qui vous donne plus de flexibilité et de contrôle. 

Vue JS Dynamic Components

Exemple en direct sur JSFiddle

0
Ravi Anand