将活动类添加到子元素答案

【问题标题】：Add active class to child element将活动类添加到子元素
【发布时间】：2017-11-24 12:41:12
【问题描述】：

我是 Vue.js（和 bootstrap-vue）的初学者，我想创建标签（如 here）

<b-nav class="nav-tabs">
    <b-nav-item v-bind:active=true v-bind:class="{ active : tab === 1 }" v-on:click="tab = 1">Link 1</b-nav-item>
    <b-nav-item v-bind:class="{ active : tab === 2}" v-on:click="tab = 2">Link 2</b-nav-item>
    <b-nav-item v-bind:class="{ active : tab === 3}" v-on:click="tab = 3">Link 3</b-nav-item>
</b-nav>

但是当我单击第二个链接时，它不会更改 active=true（并且第一个按钮上的 active=false）。我试过了

v-on:click:active=true

但它不起作用。它适用于标签，但不适用于导航（例如https://bootstrap-vue.github.io/docs/components/tabs）。有什么想法吗？

添加：

Vue 代码：

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
new Vue({
    el: '#app',
    data: {
        tab: 1
    },
});

【问题讨论】：

你能展示你的 Vue JS 代码吗？例如，需要知道如何定义组件模板。

标签： vue.js bootstrap-4

【解决方案1】：

不熟悉 bootstrap-vue，但我只是在他们的 playground 中做了一些玩弄，你需要绑定的是 active 属性，bootstrap 会处理其中的样式。

换句话说，这似乎有效：

<b-nav class="nav-tabs">
  <b-nav-item :active="tab === 1" @click="tab = 1">Link 1</b-nav-item>
  <b-nav-item :active="tab === 2" @click="tab = 2">Link 2</b-nav-item>
  <b-nav-item :active="tab === 3" @click="tab = 3">Link 3</b-nav-item>
</b-nav>

【讨论】：

【解决方案2】：

首先您可能需要在v-bind:active="true" 中添加引号，但这里是通用的fiddle。我没有使用 bootstrap-vue 组件，但应该没那么难

【讨论】：

【解决方案3】：

你可以这样继续

<b-nav class="nav-tabs">
    <b-nav-item exact-active-class="active" to="/link-1">Link 1</b-nav-item>
    <b-nav-item exact-active-class="active" to="/link-2">Link 2</b-nav-item>
    <b-nav-item exact-active-class="active" to="/link-3">Link 3</b-nav-item>
  </b-nav>

property exact-active-class: <router-link> prop：配置当链接处于活动状态时应用的活动 CSS 类完全匹配。通常，您需要将其设置为类名“活动”

【讨论】：