¿Cómo agregar una clase activa en este ciclo en el que se muestran dinámicamente los menús Vue Js? No pude colocar la clase activa para los menús abiertos.
<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>Muestra la lista de menús de la base de datos. Ahora solo quiero activar el menú abierto.
Lo hice de esta manera.
<!-- 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> Agregué todas las pestañas que quería agregar en una matriz llamada tabs
<script> export default { name: 'Home', data() { return { active_tab: "Tab1", tabs: ["Tab1", "Tab2", "Tab3"] } } </script>v-for = "(pestaña, índice) en pestañas"
Esto va a crear un <li> para cada tab en las tabs de la matriz
class="nav-link" @click="active_tab = tab" v-bind:class="{ 'active' : tab === active_tab }"
Todos los elementos tendrán una clase de nav-link y, además, con v-bind , se agregará active a la lista de clases del elemento si la variable active_tab es igual a tab . Y cada vez que el usuario haga clic en una de las pestañas, con @click cambiará active_tab a la tab en la que hizo clic el usuario.
Estilismo
.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 */ }