首页 文章

将活动类添加到子元素

提问于
浏览 次
2

我是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 bootstrap-4

2 回答

  • 5

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

    换句话说，这似乎有效：

    <b-nav class="nav-tabs">
  <b-nav-item v-bind:active="tab === 1" v-on:click="tab = 1">Link 1</b-nav-item>
  <b-nav-item v-bind:active="tab === 2" v-on:click="tab = 2">Link 2</b-nav-item>
  <b-nav-item v-bind:active="tab === 3" v-on:click="tab = 3">Link 3</b-nav-item>
</b-nav>
    回复于
  • 0

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

    回复于

相关问题