Is there a way to efficiently manage the activation and deactivation of items in a Vuetify botnav based on different router paths?
I attempted to manipulate the active.sync property to -1 when I need to deactivate a tab. However, this approach only works if no item has been activated previously. If an item is activated and then the active.sync is set to -1 again, it automatically reactivates the first item:
<v-bottom-nav
:active.sync="bottomNav"
:value="true"
shift
absolute
>
// Buttons for different items
</v-bottom-nav>
In the script section:
watch:{
$route:function(to, from){
switch(to.path){
// Cases to handle different paths
}
}
}
One workaround I found effective was to include a hidden dummy item in the botnav with its visibility set to false. By activating this hidden item, all other visible items get deactivated as intended:
Dummy item example:
<v-bottom-nav
:active.sync="bottomNav"
//other configurations
>
//visible items
<v-btn v-show="0" value="inactivate"></v-btn>
</v-bottom-nav>
To deactivate all items programmatically, the following code snippet can be used:
this.bottomNav = "inactivate"
This method does work effectively, but it feels somewhat like a hack. Is there a more elegant or formal solution to achieve the same result?