web-dev-qa-db-fra.com

Vuetify: Comment présélectionner l'onglet actif?

Je veux utiliser Vuetify (v1.0.18) pour rendre une navigation statique en utilisant v-tabs . Le routage étant effectué côté serveur, il me faut un moyen de définir l'onglet actif par propriétés. C'est une tâche très basique, mais je ne le fais pas fonctionner. Exemple:

<v-tabs>
  <v-tab href="/path1">Tab 1</v-tab>
  <v-tab href="/path2">Tab 2</v-tab>
</v-tabs>

Cela présélectionne le premier onglet - bien.

Maintenant, la question est: Comment présélectionner le deuxième onglet? Est-ce que not work:

<v-tabs value="tab2">
  <v-tab id="tab1" href="/path1">Tab 1</v-tab>
  <v-tab id="tab2" href="/path2">Tab 2</v-tab>
</v-tabs>
vue.jsvuetify.js
4
Georg Ledermann

Pour contourner le problème, j'ai créé un composant wrapper:

<template>
  <v-tabs v-model="selectedTab">
    <slot></slot>
  </v-tabs>
</template>

<script>
  export default {
    name: 'StaticTabs',

    props: [ 'selected' ],

    mounted() {
      this.selectedTab = this.selected
    },

    data: () => ({
      selectedTab: null
    }),
  }
</script>

Utilisez-le avec ceci:

<static-tabs selected="/path2">
  <v-tab id="tab1" href="/path1">Tab 1</v-tab>
  <v-tab id="tab2" href="/path2">Tab 2</v-tab>
</static-tabs>

Beaucoup de code pour une tâche très basique, mais cela fonctionne.

0
Georg Ledermann

Utilisez v-model:

<v-tabs v-model="activetab_href_variable">

Il n'y a pas d'informations à ce sujet (le 17/05/2018) dans la version actuelle de la documentation mais 0.17 ( https://vuetifyjs.com/releases/0.17/#/components/tabs ) a:

v-model String - Onglet sélectionné en cours

2
ndpu

Pour présélectionner un onglet actif:

   <v-tabs grow v-model="active_tab">
     <v-tab v-for="tab of tabs" :key="tab.id">
       {{tab.name}}
     </v-tab>
   </v-tabs>

La partie script:

  export default {
    data: () => ({
      active_tab: 2,
      tabs: [
        { id: 1, name: 'tab1' },
        { id: 2, name: 'tab2' },
        { id: 3, name: 'tab3' }
      ]
    })
  }

Voir en action ici

Note: Nous avons présélectionné l'onglet avec le nom tab3.

N'oubliez pas que vuetify définira le active_tab sur l'index de l'onglet actif. Donc, l’indice de l’item 3 est 2 parce qu’il commence à 0.

Pour cet exemple, j'ai utilisé la version de Vuetify: 1.1.9

1
roli roli