我是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
},
});
答案 0 :(得分: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>
答案 1 :(得分:0)
首先,您可能需要在v-bind:active="true"
中添加引号,但这里是常规fiddle。我没有使用bootstrap-vue组件,但它不应该那么困难