Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tabs title slot is not reactive

See original GitHub issue

When using a template slot to display a badge in the tab title I’ve found that the badge doesn’t update when the data changes.

I’m not sure, I could be doing something wrong? But any help would be appreciated.

<b-tabs ref="tabs" card>
     <b-tab active>
        <template slot="title">
            Tasks <span class="badge badge-primary" v-show="tasks.length > 0">{{tasks.length}}</span>
        </template>
        <table>...</table>
    </b-tab>
</b-tabs>

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:7 (3 by maintainers)

Top GitHub Comments

18reactions

emanuelmutschlechnercommented, May 31, 2018

Have a look at #1830. Currently the reactivity of tabs is limited to changes on the element <b-tab>.

Observation of the DOM does not include subtree changes: https://github.com/bootstrap-vue/bootstrap-vue/blob/491d698e0d2347f0b650fccb3122f008a16e1d1f/src/components/tabs/tabs.js#L413-L419

A current workaround is to set a prop on <b-tab>. This will trigger updateTabs and rerender the tab title slot: https://jsfiddle.net/409n7gmy/22/

0reactions

tmorehousecommented, Nov 6, 2018

Closing this in favour of #2148

Top Results From Across the Web

How to place an icon next to tab title (bootstrap-vue)

This is working for me, using Vue-bootstrap's slot fucntionality. <b-tabs> <b-tab active > <template slot="title"> Overall <b-badge ...

Tooltip | Components - BootstrapVue

Easily add tooltips to elements or components via the component or v-b-tooltip directive.

Creating a Reusable Tab Component in Vue - Fjolt

Our tabs are going to have one property - active . This property will define whether a tab should show or not. Inside...

Compose Components Using Slots Vs Data

The component templates each have a slot element and use custom events to manage ... handleChildRegister(event) { // Suppress event if it's not...

[Solved]-Slot contents are merged between Tabs in VueJS-Vue.js

The simplest way to fix the issue is to wrap all components in <Panel> -s: <TabPanel> <Panel title="Dashboard" panel-id="dashboard"> <Dashboard></Dashboard> ...