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.

Tab title slot is not reactive

See original GitHub issue

DISCLAIMER: This issue is a duplicate but meant to be the one place to go to find all information about this bug and a possible workaround until it gets fixed.

As @emanuelmutschlechner mentioned:

Currently the reactivity of tabs is limited to changes on the element <b-tab>. Observation of the DOM does not include subtree changes:

A current workaround is to set a prop on <b-tab>. This will trigger updateTabs and rerender the tab title slot.

See this example for a live demo of the issue and the workaround:

Replaces: #1397, #1677, #1830, #1871, #2065

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:6
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

tmorehousecommented, Nov 7, 2018

Yeah, I’ve peeked at it before (its coded by a guy from the Vue team). He’s doing a bit more funky stuff with source and destination components, and I don’t think we need to go that deep. But he does have some nifty things going on in there.

tmorehousecommented, Nov 7, 2018

I’ve been working on making popovers/tooltips “better”, (currently we use DOM re-targetting/moves to bring reactive content into another element, which goes against Vue’s philosophy) And on how to render reactive content into another document location. With render functions, and dynamic components that can be mounted anywhere in the document, we can take advantage of this feature in render functions to render and mount content in other areas of the document, rather than inside the component it exists in. It is nifty stuff, and not-so-obvious (not until a thorough reading of Vue’s source code)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tabs title slot is not reactive · Issue #1677 · bootstrap-vue ...
What I've found is that the tab title updates when I click on another tab. It's like it doesn't react until another event...
Read more >
Data passed to a slot is not reactive - javascript - Stack Overflow
Hi Sri, I think this was caused by some weird css clash. In the end I decided to skip dialog and use vue-router....
Read more >
Building a Reusable Tabs Component with Vue Slots - YouTube
In this Vue 3 tutorial, we'll be using slots to build a custom tab component that allows any sort of content to be...
Read more >
Tabs component - Vuetify
Tabs. The v-tabs component is used for hiding content behind a selectable item. This can also be used as a pseudo-navigation for a...
Read more >
[Solved]-Vue rendering order-Vue.js -
Note: the provide and inject bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found