I have <v-tabs> this kind:
<v-tabs
fixed-tabs
centered
align-with-title
height="55"
class="d-flex align-end justify-center mt-0"
>
<v-tabs-slider color="pink" v-show="(searchClosed && !search)"></v-tabs-slider>
<v-tab :disabled="!searchClosed" :to="{ name : 'home' }">Home</v-tab>
<v-tab :disabled="!searchClosed" :to="{ name : 'premiers' }">Premiers</v-tab>
<v-menu offset-y bottom max-height="500" v-model="genresMenu">
<template v-slot:activator="{ on, attrs }">
<v-tab @click="genresMenu = !genresMenu" bind="attrs" v-on="on">Genres</v-tab>
</template>
<v-list
nav
rounded
max-width="800"
align="center"
>
<v-list-item
v-for="genre in genres"
:key="genre.id"
:to="{ name : 'genre', params: { id: genre.id }}"
>
<v-list-item-title>{{ genre.name }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-tabs>
The active class switches between the Home / Premiers tab as needed, but when you click on the link on the Genre tab, the active class is updated and returned to the Home tab. Can I somehow keep the Genre tab active after following the link inside v-list-item? Example path: /genre/1
Try this
<template v-slot:activator="{ on, attrs }">
<v-tab >
<div @click="genresMenu = !genresMenu" bind="attrs" v-on="on">Genre</div>
</v-tab>
</template>