活动时在菜单项上添加类

Answer 1

我在任何地方都没有看到你的

isActive

状态。因此，您可以从将其添加到状态开始。

例如：

<template>
    <!-- loop using the template syntax -->
  <template
    v-for="item in menuData.menuItems"
    :key="item."
    :is="item.type"
    :href="item.url"
    :text="item.text"
    :class="{ active: item.isActive }"
  >
  </template>
</template>

<script setup>
// import ref function to act as the state
import {ref} from 'vue'

// define the state
const menuData = ref({
  menuItems: [
    {
      type: 'a',
      text: 'Link1',
      url: ``,
      classes: [],
      isActive: true
    },
    {
      type: 'a',
      text: 'Link2',
      url: ``,
      classes: [],
      isActive: false
    },
    {
      type: 'a',
      text: 'Link3',
      url: ``,
      classes: [],
      isActive: false
    },
  ],
})
</script>

<style scoped>
/* add active class */
.active {
    background-color: red;
}
</style>

添加

active

课程取决于您所在州的

isActive