I am displaying tabs in this manner...
<v-tabs v-model="tab" v-on:change="tabbed()" fixed-tabs>
<v-tab ripple>Tab A</v-tab>
<v-tab ripple>Tab B</v-tab>
<v-tab ripple>Tab C</v-tab>
// tab items, etc
I want the current URL path to determine the active tab and for changing the tab to update the path accordingly. I attempted to achieve this using path (since I'm new), but instead used a query format like /mypath?tab=2
data: () => ({
tab: null
}),
methods: {
tabbed () {
console.log(`we switched tabs, now tab is ${this.tab} and route is ${JSON.stringify(this.$route.path)}`)
this.$router.replace({ path: this.$route.path, query: { tab: this.tab } })
}
},
created () {
console.log(`current tab is ${this.$route.query.tab}`)
this.tab = this.$route.query.tab
}
I assumed this approach would work: retrieve the tab value from the query on page load and set it as the active tab. Upon switching tabs, update the query with the new tab value. However, when navigating to /mypath?tab=2, or any other tab, the page defaults back to the first tab and the console displays:
current tab is 2
we switched tabs, now the tab is 0 and route is "/mypath"
Is there some issue during initialization that resets the tab to zero??
Can I configure this functionality with routes, such as being able to visit "/mypath/tab-a"
Alternatively, can I still make this feature function using queries? Despite what seems like correct code implementation, the reason behind its failure remains unclear.