javascriptvue.jsvuetify.js

Vuetify: How to preselect active tab?


I want to use Vuetify (v1.0.18) to render some static navigation using v-tabs. The routing is done on the server side, so I need a way to set the active tab by properties. It's a very basic task, but I don't get it to work. Example:

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

This preselects the first tab - fine.

Now the question ist: How to preselect the second tab? The following does 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>

Solution

  • As a workaround I made a wrapper component:

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

    Use it with this:

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

    Lots of code for a very basic task, but it works.