I have tabs like this...

<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'd like the URL path to determine the tab, and I'd like a tab change to change the path. I wasn't able to do this with path (because I'm new), but I thought I could approximate what I want with a query, like /mypath?tab=2

  data: () => ({
    tab: null
  }),
  methods: {
    tabbed () {
      console.log(`we tabbed, 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(`tab is ${this.$route.query.tab}`)
    this.tab = this.$route.query.tab
  }

I thought this would do the trick: on create, get the tab from the query and set the tab model. On tab change, get the tab from the tab model and set the query. But, when I navigate to /mypath?tab=2, or any tab, I end up on the 0th tab and get console output like this:

tab is 2

we tabbed, now the tab is 0 and route is "/mypath"

Something about mounting changes the tab back to zero??

Can I make this work with routes, so I can go to "/mypath/tab-a" Can I at least make this work with queries? It seems like my code is correct, but I don't understand why it fails to work

I have tabs like this...

<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'd like the URL path to determine the tab, and I'd like a tab change to change the path. I wasn't able to do this with path (because I'm new), but I thought I could approximate what I want with a query, like /mypath?tab=2

  data: () => ({
    tab: null
  }),
  methods: {
    tabbed () {
      console.log(`we tabbed, 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(`tab is ${this.$route.query.tab}`)
    this.tab = this.$route.query.tab
  }

I thought this would do the trick: on create, get the tab from the query and set the tab model. On tab change, get the tab from the tab model and set the query. But, when I navigate to /mypath?tab=2, or any tab, I end up on the 0th tab and get console output like this:

tab is 2

we tabbed, now the tab is 0 and route is "/mypath"

Something about mounting changes the tab back to zero??

Can I make this work with routes, so I can go to "/mypath/tab-a" Can I at least make this work with queries? It seems like my code is correct, but I don't understand why it fails to work

• javascript
• vue.js
• vuetify.js

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Mar 9, 2019 at 6:41 goodsongoodson 75744 gold badges1515 silver badges3232 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Ok, I solved the same by this:

<template>
    <el-tabs v-model="activeTab">
        <el-tab-pane label="tab A" name="tabA"></el-tab-pane>
        <el-tab-pane label="tab B" name="tabB"></el-tab-pane>
        <el-tab-pane label="tab C" name="tabC"></el-tab-pane>
    </el-tabs>
</template>

<script>
    export default {
        data() {
            return {}
        },
        puted: {
            activeTab: {
                set(val) {
                    let query = {...this.$route.query};
                    query.tab = val;
                    this.$router.replace({query: query});
                },
                get() {
                    return (this.$route.query.tab || 'tabA');
                }
            }
        }
    }
</script>

Maybe helpful to you

I ran into this problem too and fixed it by using parseInt when handling the route:

this.tab = parseInt(this.$route.query.tab)