活动类添加到子元素

我初学者用Vue.js（和引导-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 
    }, 
});

来源

2017-06-21 KMatko

你能告诉你的Vue的JS代码？例如，需要了解如何定义组件模板。 –

不熟悉引导-VUE，但我只是做了一点在他们的playground玩弄的，你需要绑定什么active财产，引导程序会照顾到这些样式。

换句话说，这似乎工作：

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

来源

2017-06-21 15:10:57

谢谢你，男人！ – KMatko

首先你可能需要添加引号v-bind:active="true"的，但这里是一般fiddle。我不使用引导-VUE组成部分，但它不应该是很难

来源

2017-06-21 15:05:28

活动类添加到子元素

回答

相关问题