Vuetify: [Bug Report] v-tabs still buggy with named routes

Created on 13 Feb 2018  路  7Comments  路  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.0.0
Vue: 2.5.13
Browsers: Chrome 64.0.3282.140
OS: Windows 7

Steps to reproduce

Create a v-tabs component, set v-model and assign tabs to named routes with the to prop.
See codepen for example. Click on the different tabs a few times and see how the indicator is sometimes out-of-sync.

Expected Behavior

Tabs slider to move as tabs are clicked and always to show under the active tab.

Actual Behavior

Slider does not always move. Also, in my project the slider does not show at all on initial load, but I am not able to replicate this in the codepen.

Reproduction Link

https://codepen.io/anon/pen/paryej

Other comments

The tabs__item--active tabs__item class is applied to the correct tab, but the slider does not always move. When the bug appears, the v-model does not reflect the route path but rather the tab index (it seems).

This issue has been present since 1.0.0-beta6, but is supposed to be fixed in 1.0.0 (see #3203). It seems it was fixed only when the route is specified using path, but not when using named routes.

critical bug

Most helpful comment

the same here ..

All 7 comments

Glad you filed this.

Appears to be a regression of #3203

the same here ..

Sadly the fix brought this bug up:
https://github.com/vuetifyjs/vuetify/issues/3418

@janein Can you come to the community please, https://community.vuetifyjs.com

@johnleider am there - also called "janein". feel free to contact me!

Has this ever been fixed? I'm on "vuetify": "^1.5.5" and it seems to still persists. If I add an string as a route everything works fine. If I add a named route it loads the correct component and route, but the animation and the active tab are buggy. The animation does not show up and the active tab underlying is under the wrong tab.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alterhu2020 picture alterhu2020  路  3Comments

SteffenDE picture SteffenDE  路  3Comments

smousa picture smousa  路  3Comments

sebastianmacias picture sebastianmacias  路  3Comments

gluons picture gluons  路  3Comments