I am trying to find a way to customize the CSS based on whether a link is exact or active. Essentially, when a user clicks on a menu item, I want the underline to change depending on whether the link is an active router-link. Although I was able to accomplish this by changing the bottom border to yellow when a link is active, I would like to take it a step further.
What I want is for the color of the bottom border to change to red when someone clicks on "Home" and blue when they click on "Diagram" (and potentially other links if there are more). Here's how I have implemented this in my code:
JS
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
links: [
{ icon: 'dashboard', text: 'Home', route: '/', component: home , color:"red"},
{ icon: 'mdi-chart-pie', text: 'Radar diagrammen', component: diagram, route: '/diagram' , color:"blue"}
]
}
}
})
HTML
<div id="app">
<div>
<v-app-bar flat app dark class='elevation-0'>
<v-toolbar-title class="text grey--text">
<span class="font-weight-light">Stations</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<div class="flex-grow-1"></div>
<v-btn v-for="link in links"
:key="link.text"
router :to="link.route"
text
exact
small
tile
active-class="active text-center">{{link.text}}</v-btn>
</div>
</div>
CSS
.active {
border-bottom: yellow solid 2px;
}