1

I couple tabs on my page and I'm trying to stay on the same tab after refreshing the page but I'm not sure how to approach this. Right now if I'm on TAB-2 and I refresh the page, it will take me back to the first tab.

<v-tabs vertical>
      <v-tab>
        <v-icon left>mdi-account</v-icon>
        TAB-1
      </v-tab>
      <v-tab>
        <v-icon left>mdi-lock</v-icon>
        TAB-2
      </v-tab>
      v-tab-item>
        <v-card flat>
          <v-card-text>
            <p>
              TAB-1 Sed aliquam ultrices mauris. Donec posuere vulputate arcu. Morbi ac felis. Etiam feugiat lorem non metus. Sed a libero.
            </p>
       </v-card-text>
        </v-card>
      </v-tab-item>
      <v-tab-item>
        <v-card flat>
          <v-card-text>
            <p>
              TAB -2 Morbi nec metus. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis .
            </p>
          </v-card-text>
        </v-card>
      </v-tab-item>
    </v-tabs
livreson ltc
  • 733
  • 8
  • 22

1 Answers1

1

use sessionStorage to save v-model value of <tabs> temporarily

such as this

created(){
    this.model = sessionStorage.getItem('key');
},
methods:{
    handleChange(index){
        sessionStorage.setItem('key', index);      
    }
}
zixiCat
  • 1,019
  • 1
  • 5
  • 17
  • zixiCat, your answer is pointing me in the right direction to a similar problem with a v-list menu. I've added v-model="handleChange" to the v-list containing all the v-list-items but I don't know how to assign the key/index. Can you please help? Thanks – Ken Jul 15 '21 at 17:31
  • @ken handlechange is a function bound to the click event or the event where we can listen for the change of tab, it's not value or model, the model is value of acitve key. – zixiCat Jul 16 '21 at 02:08