Vuejs : Is there a event emitted when a particular tab gets active ( boostrap-vue )

user_12845142 0
Viewed 2720

I want to show and hide a div ( a section in my page ) when a particular b-tab is active and close it when it is not active ( open and close is achieved using 2 methods - forceOpenSettings and forceCloseSettings). Is there an event emitted when a particular tab gets active. So that I could link that to these methods. I could not find any when I checked bootstrap-vue documentation. The closest thing I found was this - https://bootstrap-vue.org/docs/components/tabs#programmatically-activating-and-deactivating-tabs

Tried using the activate and deactivate explained in this section like this, but it's not working

<b-tab title="User Table" @activate="forceOpenSettings" @deactivate="forceCloseSettings"></b-tab>

Case when it's working fine

The same thing working fine here. I wanted to open and close the same div but this time based on b-collapse. In the bootstrap-vue docs for b-collapse, I could find @hide and @show event emitters - https://bootstrap-vue.org/docs/components/collapse#comp-ref-b-collapse-events . Tried using that and it works fine. What i want is an event emitter similar to that when the tab is active and not active.

<b-collapse role="tabpanel" @show="forceOpenSettings" @hide="forceCloseSettings"></b-collpase>

NB - The section that is shown and hidden is another section in the page, not a child of b-tabs or b-collapse. I just want to open and close that div based on this tab and collapse. Collapse is working fine but the tab is not.

If there are no event emitters maybe I should write a method to achieve this. But it would be great if Vuejs has some event emitters to achieve this.

eventemitter bootstrap-vue vue.js click javascript
2 Answers

Try something like this:

<b-tabs @input="onTabChange" ...
...
methods: {
  onTabChange () {
    // tab is changed!
  }
}
user_13766180

All the events mentioned in the doc require to know the index of your tab in order to find out if it was activated or not. B-tab also emits a click event. Works fine like this

<b-tab :title="title" @click="yourMethodHere()">
{{ content }}
</b-tab>
user_106921940
Related