0👍
Hey mate have the same issue. I found explanation and as result code it.
It works properly. Try it.
<template>
<v-tabs centered="centered" grow v-model="activeTab">
<v-tab
v-for="tab of tabs"
:key="tab.id"
:id="tab.id"
:to="tab.route" exact>
{{ tab.title }}
</v-tab>
<v-tabs-items
v-model="activeTab"
@change="updateRouter($event)">
<v-tab-item
v-for="tab of tabs"
:key="tab.id"
:value="tab.route"
class="tab_content">
<router-view
v-if="tab.route === $route.fullPath && tab.route === activeTab">
</router-view>
</v-tab-item>
</v-tabs-items>
</v-tabs>
</template>
Here script data.
data() {
return {
activeTab: '',
tabs: [
{id: 1, title: 'Business', route: '/business'},
{id: 2, title: 'System', route: '/system'},
]
};
},
methods: {
updateRouter(tab) {
this.$router.push(tab)
},
}
And router
children: [
{
path: '/business',
name: 'business',
component: () => import(
/* webpackChunkName: "dashboard-page" */ './views/DashboardPage/DashboardTabs/DashboardBusinessTab'
),
meta: {
permission: null,
},
},
{
path: 'system',
name: 'system',
component: () => import(
/* webpackChunkName: "dashboard-page" */ './views/DashboardPage/DashboardTabs/DashboardSystemTab'
),
meta: {
permission: null,
},
},
],
This was key for solution
v-if="tab.route === $route.fullPath && tab.route === activeTab">
- [Vuejs]-Django model object with foreign key post
- [Vuejs]-Vue Component control Component instance variable by another same Component
Source:stackexchange.com