Vuetify: How to use tabs with Vue Router?

[maartendraijer]

I'm trying to use the Tabs component together with the Vue router, but I can't get it to work. Here is a fiddle of what I'm doing: http://jsfiddle.net/h4kpvk4v/2/

v-tab-content doesn't get 'active' and it throws this error: Uncaught TypeError: this.href.replace is not a function

Is this a bug or am I doing something wrong?

[mathieucivel]

Maybe this can help : http://jsfiddle.net/h4kpvk4v/

[maartendraijer]

@mathieucivel I have used that Fiddle as base for my own Fiddle. :-) Also it does not highlight the second tab (GO TO BAR) when you click it:

[johnleider]

That is something we are going to add in soon. It's currently not tracking the route change and doesn't actually move the slider.

[maartendraijer]

@johnleider Thanks for the new release! 🎉

Though, I still can't get tabs to work in combination with the router. Check out this Fiddle: http://jsfiddle.net/h4kpvk4v/4/.

Am I still doing something wrong?

[johnleider]

I'm not home right now but your js fiddle worked fine on my mobile.

[maartendraijer]

@johnleider That's strange. This is what I'm seeing when I load the Fiddle:

Here it _should_ highlight 'GO TO BAR' and show the 'bar' content. But it does not, unfortunately.

[johnleider]

Oh, I thought you were just having issues changing routes. It's on page load.

[maartendraijer]

@johnleider Also on changing routes it doesn't show the <v-tab-content> component. It keeps having a display: none; on it.

[johnleider]

If you're using the tabs as router you can't use tab content, you would use your router view.

[maartendraijer]

@johnleider Ah, yeah, alright. Then the only issue is that it doesn't highlight the proper tab on a page load/refresh.

[chrisgillis]

Still doesnt highlight the proper tab on a page load / refresh.

[johnleider]

Please don't comment on old tickets, if it is happening in a new version, you are best to create a new issue please. Thank you.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord