[Bug Report] v-tab does not deactivate when route changes to a non-tabbed route

[randanunn]

Versions and Environment

Vuetify: 1.5.1
Vue: 2.6.4
Browsers: Chrome 72.0.3626.109
OS: Mac OS 10.13.6

Steps to reproduce

Using vue-router and the :to parameter. Create a route in your app that is not available via v-tab. Navigate to it and see that the previously selected route/tab is still showing as active in the v-tab

Expected Behavior

De-activate tab if route does not match the tab.

Actual Behavior

Previously selected tab stays active even when route changes.

Reproduction Link

https://codepen.io/lucille2/pen/bzMmPQ

Other comments

In my app I use a v-toolbar header with tabs in the extension slot and an account menu in the main slot. The account menu can go to routes that are not available as tabs. But I cannot de-activate the v-tab when the user goes to one of those other routes. **Using vue-router

[randanunn]

[lucafaggianelli]

I faced the same bug, is there a workaround to set the active tab? or somehow refresh vtabs?

[johnleider]

I'm adding a new prop to help facilitate this functionality. Tabs by nature are mandatory which means that it expects to always have a value if it can have one. The new optional prop will allow the component to have no designated value.

[randanunn]

Awesome! Thanks John!

[johnleider]

Fixed in f22d754

[dsldiesel]

Not working for me! V-tab item stays selected when navigating to a route that's not within tab route links.

[jacekkarczmarczyk]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.

[randanunn]

@dsldiesel you have to set `:optional="true".

[dsldiesel]

Thanks @randanunn ,
But it sticks with selected state also binding it.
I don0t know what this is, it is inside a v-navigation-drawer, as follows:

<v-navigation-drawer
    :value="drawer"
    width="81px"
    disable-resize-watcher
    mobile-break-point="100"
    clipped
    left
    app
  >
    <v-tabs
      :optional="true"
      vertical
      mobile-break-point="100"
      active-class="blueActive"
    >
      <v-tab
        v-for="(button, index) in menu"
        :key="index"
        class="menuTab"
        :to="button.path"
      >
        <img
          :src="require('@/assets/img/menu/' + button.name + '.png')"
          :alt="button.alt"
        />
      </v-tab>

Anything weird?

[westlepor]

Hi
When optional is set as true, how can I hide slider bar?

[johnleider]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or create a new discussion.

If you have any questions, please reach out to us in our Discord community.