Vue菜单项激活状态异常：添加isActive后全局显示active类

你的问题出在模板绑定active类时，用了全局的isActive变量，而非每个菜单项自身的isActive属性，导致所有链接共用同一个判断条件，所以会同时激活。

修改模板中的:class绑定，改为引用当前循环项的item.isActive：

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

另外给v-for加上:key是Vue的最佳实践，能帮助框架更高效地更新DOM。

如果需要动态切换激活状态（比如点击菜单项时切换），只需要修改对应menuItems数组项的isActive值即可，示例：

// 点击某菜单项时，将该项设为激活，其余设为未激活
function setActiveMenuItem(targetText) {
  menuData.menuItems.forEach(item => {
    item.isActive = item.text === targetText;
  });
}

内容的提问来源于stack exchange，提问作者selihug