Vuetify issues with toolbar item always active

Question

I'm using the Vuetify toolbar: I've three v-tab (on right) and the title (on left) which correspond to the website home. The v-tabs states works when I click in their component but if I click in title to go back home the last active v-tabs element remain active. In the picture below I'm actually in the home. enter image description here

I tried to add optional property but it doesn't work

The current code is:

<script>
import Searchbar from "./Searchbar.vue";

export default {
  name: "NavBar",
  components: { Searchbar },
  data() {
    return {
      appTitle: "ShowCase",
      drawer: false // Falso perchè è chiuso, quando si apre diventa vero
    };
  }
};
</script>

<style>
</style>

<template>
  <v-toolbar height="70" color="#252525" dark>
    <v-toolbar-title
      class="teal--text text--accent-3"
      style="cursor: pointer"
      @click="$router.push('/')"
      title="hover text"> 
       GameShelf 
      </v-toolbar-title>

    <v-spacer></v-spacer>
    <Searchbar/>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
    <v-tabs optional v-model="tab" fixed-tabs height="70" color="#252525" hover>
          <v-tab optional @click="$router.push('/Tuttiigiochi')"> All Games </v-tab> 
          <v-tab @click="$router.push('/Sceltidallaredazione')"> RetroGaming </v-tab>
          <v-tab  @click="$router.push('/Aboutus')"> About us</v-tab>
        </v-tabs>
      
   
    </v-toolbar-items>
  </v-toolbar>
</template>

How can I make the v-tabs elements inactive when I go back in the home?

Answer 1

you could use a function to redirect user and manually reset tab in your toolbar title element:

@click="redirect"

In your methods:

redirect() {
  this.tab = null
  this.$router.push('/')"
}

You could also watch the route and set tab to null when route equals '/' ;

watch:{
    '$route' (to, from){
       if( to === '/') this.tab = null
    }
},