在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);
    /* 当元素处于活动状态时 */
}