Vuetify: Как предварительно выбрать активную вкладку?

Question

Я хочу использовать Vuetify (v1.0.18) для визуализации статической навигации с использованием v-tabs .Маршрутизация выполняется на стороне сервера, поэтому мне нужен способ установить активную вкладку по свойствам.Это очень простая задача, но я не заставляю ее работать.Пример:

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

Это предварительно выбирает первую вкладку - отлично.

Теперь вопрос: Как предварительно выбрать вторую вкладку?Следующее не работает:

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

Answer 1

Установите v-model внутри обратного вызова mounted() компонента, в котором находится v-tabs

<v-tabs v-model="selectedTab">
  <v-tab key='first'>First</v-tab>
  <v-tab key='second'>Second</v-tab>
</v-tabs>



<script>
export default {
   ...
   mounted() {
     this.selectedTab = 'first';
   },
   ...
}
</script>

Answer 2

В качестве обходного пути я сделал компонент оболочки:

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

Используйте это с этим:

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

Много кода для очень простой задачи, но она работает.

Answer 3

Чтобы предварительно выбрать активную вкладку:

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

Часть скрипта:

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

Смотрите это в действии здесь

Примечание : мы предварительно выбрали вкладку с именем tab3.

Имейте в виду, что vuetify установит active_tab в индекс активной вкладки.Таким образом, индекс элемента с идентификатором 3 равен 2, потому что он начинается с 0.

Для этого примера я использовал vuetify version: 1.1.9

Answer 4

Использовать v-model:

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

Нет информации об этом (17.05.2008) в текущей версии документации, но 0,17 (https://vuetifyjs.com/releases/0.17/#/components/tabs) имеют это:

v-model String - Текущая выбранная вкладка