时间戳

首页 > 解决方案 > 如何使用 Vue 动态列表在锚标记上设置活动类

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

问题描述

我正在尝试使用以下代码在 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 时，活动类位于列表项标记上而不是锚标记上。

无论如何要确保将类添加到锚标签中？

标签： javascriptvue.jsbootstrap-vue

解决方案

我假设<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>了！

希望有帮助！

推荐阅读