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

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 时，活动类在列表项标记上，而不是在锚标记上。

有没有办法确保将类添加到锚标记中？

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> 上！

希望有帮助！