在Vue Js中如何为菜单循环动态添加活动类？

Question

如何在动态显示菜单的循环中添加活动类（active class）？我无法为打开的菜单设置活动类。

<a v-bind:href="module.route" class="nav-link">
     //module.route 是数据库列
      <i :class="module.icon" ></i>
        //module.icon 是数据库列
       <p>
         {{ module.name }}
            //module.name 是数据库列
       </p>
  </a>

它从数据库中显示菜单列表。现在我只想让打开的菜单变为活动状态。

Answer 1

我是这样做的。

<!-- 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>

我在一个名为tabs的数组中添加了所有我想要添加的选项卡。

<script>

export default {
  name: 'Home',

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

</script>

这将为数组tabs中的每个tab创建一个<li>元素。

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

样式

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