How to add active class in this loop in which is dynamically showing the menus Vue Js? I couldn't place active class for the open menus.
<a v-bind:href="module.route" class="nav-link">
//module.route is a database column
<i :class="module.icon" ></i>
//module.icons is a database column
<p>
{{ module.name }}
//module.name is a database column
</p>
</a>
Its showing the list of menus from database .Now I just want to make the open menu active.
I did it this way.
<!-- App.vue HTML PART -->
<li v-for = "(tab, index) in tabs" :key="index" class="nav-link" @click="active_tab = tab" v-bind:class="{ 'active' : tab === active_tab }">
...
</li>
I added all the tabs I wanted to add in an array named tabs
<script>
export default {
name: 'Home',
data() {
return {
active_tab: "Tab1",
tabs: ["Tab1", "Tab2", "Tab3"]
}
}
</script>
v-for = "(tab, index) in tabs"
This is going to create one <li> for every tab in the array tabs
class="nav-link" @click="active_tab = tab" v-bind:class="{ 'active' : tab === active_tab }"
All the items are going to have a class of nav-link and on top of that with v-bind, it's going to add active to the element's classlist if the variable active_tab is equal to tab. And everytime the user clicks on one of the tabs, with @click it'll change active_tab to the tab that the user clicked.
Styling
.nav-link {
background-color: var(--primary-color);
/* how the element should look when it is normal */
}
.nav-link.active {
background-color: var(--hover-color);
/* when it is active */
}