Router breaks vuetify tabs - vuetify.js

Question

I have some vuetify tabs that work as expected before I add routes.
I want the route to change when the active tab changes.
When I add the :to directive to the the v-tab the routes work correctly (route changes when the tab changes) but the tab items do not display. The area where the v-tab-item was displayed is now blank.
<v-tabs v-model='activeTab'>
<v-tab
v-for='cc in cost_centres'
:key='cc.id'
:to="{ name: 'Element', params: {id: cc.id}}"
>
{{ cc.name }}
</v-tab>
<v-tabs-items v-model='activeTab'>
<v-tab-item
v-for='cc in cost_centres'
:key='cc.id'>
<!-- Content -->
</v-tab-item>
</v-tabs-items>
</v-tabs>
The vuetify docs reference the vue-router docs and I think I am wiring it up right but I just can't get it to work.
What am I missing?

Answer 1

the :to was setting the value of the v-tab and therefore the v-model of the v-tabs to the path instead of the id (or the index of the array).
So I removed the :to directive and watched the v-model.
When the v-model changed I extracted the value (index of the array) and used it to get the cost centre id and then set the route using router.push
On page load (mounted) I use the route param (cost centre id) to find the cost_centre index and set the activeTab v-model.

Answer 2

You might use <router-view> instead of the <v-tabs-items>:
const Foo = {
computed: {
id() {
return this.$route.params.id || ''
}
},
template: '<v-card flat>foo {{ id }}</v-card>'
}
const Bar = {
computed: {
id() {
return this.$route.params.id || ''
}
},
template: '<v-card flat>bar {{ id }}</v-card>'
}
const routes = [{
path: "/",
redirect: {
name: "foo"
}
},
{
path: "/foo",
name: "foo",
component: Foo
},
{
path: "/bar",
name: "bar",
component: Bar
}
]
const router = new VueRouter({
routes
})
new Vue({
el: '#app',
router,
vuetify: new Vuetify(),
data() {
return {
activeTab: "foo",
cost_centres: [{
id: 1,
name: "foo"
},
{
id: 2,
name: "bar"
},
]
}
},
watch: {
$route: function(val) {
console.log(val)
}
},
mounted() {
console.log(this.$route)
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container>
<v-row>
<v-col>
<v-tabs v-model="activeTab">
<v-tab v-for="cc in cost_centres" :key="cc.id" :to="{ name: cc.name, params: { id: cc.id }}">
{{ cc.name }}
</v-tab>
</v-tabs>
<router-view></router-view>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
This way the content is not synchronized by the v-model, but by the :to & the routes.
EDIT: NEW SOLUTION
If you just use the query part of the route, then you can control the tabs:
const routes = [{
path: "/",
redirect: {
path: "/0"
}
},
{
path: "/:idx",
name: "foo"
}
]
const router = new VueRouter({
routes
})
new Vue({
el: '#app',
router,
vuetify: new Vuetify(),
data() {
return {
activeTabRoute: 0,
activeTab: 0,
cost_centres: [{
id: 0,
name: "foo"
},
{
id: 1,
name: "bar"
},
]
}
},
watch: {
$route: function(val) {
this.activeTab = val.params.idx
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container>
<v-row>
<v-col>
<v-tabs v-model="activeTabRoute">
<v-tab v-for="(cc, i) in cost_centres" :key="cc.id" :to="{ name: 'foo', params: { idx: i } }">
{{ cc.name }} {{ cc.id }} {{ activeTab }}
</v-tab>
</v-tabs>
<v-tabs-items v-model="activeTab">
<v-tab-item v-for="cc in cost_centres" :key="cc.id">
<v-card flat>
Name: {{ cc.name }}<br /> ID: {{ cc.id }}<br /> IDx: {{ $route.params.idx }}
</v-card>
</v-tab-item>
</v-tabs-items>
</v-col>
</v-row>
<v-row>
<v-col>$route: {{ $route }}</v-col>
</v-row>
</v-container>
</v-app>
</div>
I created the snippet above to use the index of the for...in, because the reflects the order of the tabs, and doesn't mess up the IDs of the items.
This way you can use this component with vue-router.