CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Georg Ledermann
Georg Ledermann

Reputation: 2752

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>

Upvotes: 26

Views: 60058

Answers (8)

laventnc
laventnc

Reputation: 307

looks like you can just the 'tab-value' prop on v-tab & 'value' prop on v-tab-item to use something other than index for the tab.

https://codepen.io/laventnc/pen/MWLPejM?editors=101

<div id="app">
  <v-app id="inspire">
    <v-card>
      <v-tabs
        v-model="tab"
        background-color="primary"
        dark
      >
        <v-tab
          v-for="item in items"
          :key="item.tab"
          :tab-value="item.tab"
        >
          {{ item.tab }}
        </v-tab>
      </v-tabs>
  
      <v-tabs-items v-model="tab">
        <v-tab-item
          v-for="item in items"
          :key="item.tab"
          :value="item.tab"
        >
          <v-card flat>
            <v-card-text>{{ `${tab} -- ${item.content}` }}</v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs-items>
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      tab: 'Two',
      items: [
        { tab: 'One', content: 'Tab 1 Content' },
        { tab: 'Two', content: 'Tab 2 Content' },
        { tab: 'Three', content: 'Tab 3 Content' },
        { tab: 'Four', content: 'Tab 4 Content' },
        { tab: 'Five', content: 'Tab 5 Content' },
        { tab: 'Six', content: 'Tab 6 Content' },
        { tab: 'Seven', content: 'Tab 7 Content' },
        { tab: 'Eight', content: 'Tab 8 Content' },
        { tab: 'Nine', content: 'Tab 9 Content' },
        { tab: 'Ten', content: 'Tab 10 Content' },
      ],
    }
  },
})

Upvotes: 0

JuanBruno
JuanBruno

Reputation: 81

The value indicates the index of the tab, where the default value is 0. To select the second tab as your default tab.

<vs-tabs :value="1">
 <vs-tab>tab 1</vs-tab>
 <vs-tab>tab 2</vs-tab>
</vs-tabs>

Upvotes: 2

Vamshi Krishna
Vamshi Krishna

Reputation: 139

Set the v-model inside the mounted() callback of the component hosting the 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 {
   ...
   data: () => ({
      selectedTab: null;
    }),
   mounted() {
     this.selectedTab = 'first';
   },
   ...
}
</script>

Upvotes: 6

loomchild
loomchild

Reputation: 778

To achieve that you could store the current tab in the URL, either as a nested route or as a query parameter.

I end up using the latter solution quite often, to avoid creating a separate child component for each tab content. Here's how it works:

  1. First useful step (but not 100% obligatory), is to name the tabs, so we can refer to them by name rather than ordinal number. This can be achieved by specifying href and value props as follows:
<v-tabs v-model="tab">
  <v-tab href="#one">
    One
  </v-tab>
  <v-tab-item value="one">
    Tab content
  </v-tab-item>
</v-tabs>
  1. Next we can store the current tab as query parameter using a computed property with a setter:
computed: {
  tab: {
    set (tab) {
      this.$router.replace({ query: { ...this.$route.query, tab } })
    },
    get () {
      return this.$route.query.tab
    }
  }
}
  1. Now you can open a specific tab by following a link such as /page?tab=one (works for buttons, router links, to share a tab link with someone, etc.)

This solution applies to Vuetify.js 2.x. I wrote a short article with complete code example explaining it in detail: https://medium.com/@jareklipski/linking-to-a-specific-tab-in-vuetify-js-d978525f2e1a

Upvotes: 11

Oscar Perez
Oscar Perez

Reputation: 51

I solved this with this.$refs

<v-tab v-model="tab1" ref="tab1">

Text for tab1 Text for tab2 Text for tab3 

// Inside a method
someButton() {
  this.$refs.tab2.click()
}

Upvotes: 3

Roland
Roland

Reputation: 27719

To preselect an active tab:

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

The script part:

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

See it in action here

Note: We have preselect the tab with name tab3.

Keep in mind that vuetify will set the active_tab to the index of the active tab. So the index of the item with id 3 is 2 because it's starting from 0.

For this example I used vuetify version: 1.1.9

Upvotes: 26

Georg Ledermann
Georg Ledermann

Reputation: 2752

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.

Upvotes: 7

ndpu
ndpu

Reputation: 22561

Use v-model:

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

There is no info about it (on 05/17/2018) in current version docs but 0.17 (https://vuetifyjs.com/releases/0.17/#/components/tabs) have that:

v-model String - Current selected tab

Upvotes: 9

Related Questions