Comment ajouter dynamiquement une classe d'activité pour la boucle de menu dans Vue Js ?

Question

Comment ajouter une classe active dans une boucle qui affiche dynamiquement les menus ? Je ne parviens pas à définir une classe d'activité pour le menu ouvert.

     //module.route est une colonne de base de données
      
        //module.icon est une colonne de base de données
       

         {{ module.nom }}
            //module.name est une colonne de base de données
       
  ≪/a>≪/pré>
≪/li>
Il affiche la liste des menus de la base de données. Maintenant, je veux juste rendre le menu ouvert actif. 
            

Answer 1

C'est ce que j'ai fait.

<!-- App.vue HTML 部分 -->
<li v-for = "(tab, index) in tabs" :key="index" class="nav-link" @click="active_tab = tab" v-bind:class="{ 'active' : tab === active_tab }">
    ...
</li>

J'ai ajouté tous les onglets que je voulais ajouter dans un tableau appelé tabs.

<script>

export default {
  name: 'Home',

  data() {
    return {
      active_tab: "Tab1",
      tabs: ["Tab1", "Tab2", "Tab3"]
    }
}

</script>

Cela créera un élément <li> pour chaque onglet du tableau tabs中的每个tab创建一个<li>.

Tous les éléments auront nav-link类，并且使用v-bind，如果变量active_tab等于tab，则会将active添加到元素的类列表中。每当用户点击其中一个选项卡时，使用@click将active_tab更改为用户点击的tab.

Style

.nav-link {
    background-color: var(--primary-color);
    /* 正常时元素的外观 */
}
.nav-link.active {
    background-color: var(--hover-color);
    /* 当元素处于活动状态时 */
}