Setting current tab programmatically

[flakobatako]

It would be great if the current tab could be switched directly via a js function.

[cristijora]

You can do this with the help of a ref
https://jsfiddle.net/CristiJ/b44cc4dq/80/

There are 2 internal methods for changing a tab:
navigateToTab (tabIndex)
changeTab (oldIndex, newIndex)

navigateToTab is validating any beforeValidate functions while changeTab basically does a forced tab change without any validations but requires both the previous tab index and the current tab index.

I will probably add another way of handling such situations (maybe v-model) but for now you can use this workaround

[flakobatako]

Thanks, i ended up like this.

beforeRouteEnter(route, redirect, next) {
next(vm => {
vm.$refs.tabs.changeTab(vm.$refs.tabs.activeTabIndex,0)
})
}

And it's working like a charm.

Thanks.

[cristijora]

Let's keep this open. I will probably aim for something like this in the end.

 <vue-tabs v-model="activeTab">
    <v-tab title="First tab">
      First tab content
    </v-tab>
    <v-tab title="Second tab">
      Second tab content
    </v-tab>
</vue-tabs>

data(){
 return {
   activeTab:'First tab' 
  }
}

I will reference any updates reagrding this one in this issue here. Let me know your thoughts on that

[cristijora]

Latest release includes v-model support https://github.com/cristijora/vue-tabs/releases/tag/v0.5.0 which makes it very easy to change a tab without calling any function but rather modify the v-model