如何使用 Vue 动态列表在锚标记上设置活动 class

Question

我正在尝试使用以下代码在 Vue Bootstrap 中呈现选项卡式导航的动态列表：

<b-nav-item v-for="(page, i) in pageTabs" :key="page"
  @click="$emit(`${page}Clicked`); setActive(i);" 
  :class="{ 'active': activeIndex === i }">{{ page | capitalize }}</b-nav-item>

然后为每个项目生成以下 HTML：

<li class="nav-item"><a target="_self" href="#" class="nav-link">Home</a></li>

我遇到的问题是，当在页面上生成 html 时，活动的 class 位于列表项标签上，而不是锚标签上。

有没有办法确保 class 被添加到锚标签？

Answer 1

我假设 <b-nav-item> 看起来像：

<template>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Home</a></li>
</template>

Vue 自动将 class 属性继承给组件的包装元素。在你的例子中是 <li>。要更改此设置，您必须选择：

创建一个类似 anchorClass 的道具并将其放在您的锚标签上：

<template>
<li class="nav-item"><a target="_self" href="#" :class="['nav-link', anchorClass]">Home</a></li>
</template>

然后你可以像这样使用它：

<b-nav-item v-for="(page, i) in pageTabs" :key="page"
  @click="$emit(`${page}Clicked`); setActive(i);" 
  :anchorClass="{ 'active': activeIndex === i }">{{ page | capitalize }}</b-nav-item>

或者您只是更改属性的继承，例如：

<template>
<li class="nav-item"><a target="_self" href="#" v-bind="$attrs">Home</a></li>
</template>

但要小心，因为这意味着您在 <b-nav-item> 上设置的所有属性将始终落在锚标记上，而不是在 <li> 上！

希望对您有所帮助！

如何使用 Vue 动态列表在锚标记上设置活动 class

How to set active class on anchor tag with Vue dynamic list

javascript

vue.js

bootstrap-vue