b-tabs: be able to get active tab title

Is your feature request related to a problem? Please describe…

Hi, we need to load a component only when a b-tab is active. A solution to do this would be

<b-tabs v-model="tabIndex" >
<b-tab title="abc">...</b-tab>
...
<b-tab title="xyz">
<my-component v-if="tabIndex == 7"></my-component>
</b-tab>

Problem: The number of tabs vary dynamically, and we can’t tell at runtime which number is the proper tabIndex. But we know the title is “xyz”

Request: Be able to get the active tab title from tabIndex, or have another way to determine the current tab title.

Describe the solution you’d like

<b-tabs @change="tabChange" >

tabChange(e) never triggers. Would expect that to trigger and have the index & title in event properties.

OR

<b-tabs ref="tabs" >

and have something like this.$refs.tabs.getTitle(tabIndex)

[tmorehouse]

One can also make individual <b-tab> components lazy via the lazy prop, which when set doesn’t mount the content of the <b-tab> until it is shown/activated, and will be un-mounted when the tab is deactivated/hidden.

https://bootstrap-vue.js.org/docs/components/tabs#comp-ref-b-tab

<b-tabs>
  <b-tab title="abc">
    <!-- this component will always be mounted -->
    <my-abc-component></my-abc-component>
  </b-tab>
  <b-tab title="xyz" lazy>
    <!-- this component will not be mounted until this tab is shown -->
    <!-- and will be un-mounted when hidden -->
    <my-xyz-component></my-xyz-component>
  </b-tab>
</b-tabs>

One can also make all tab’s lazy by setting the lazy prop on the parent <b-tabs> component

https://bootstrap-vue.js.org/docs/components/tabs#comp-ref-b-tabs

<b-tabs lazy>
  <b-tab title="abc">
    <!-- this component will not be mounted until this tab is shown -->
    <!-- and will be un-mounted when hidden -->
    <my-abc-component></my-abc-component>
  </b-tab>
  <b-tab title="xyz">
    <!-- this component will not be mounted until this tab is shown -->
    <!-- and will be un-mounted when hidden -->
    <my-xyz-component></my-xyz-component>
  </b-tab>
</b-tabs>

[mariusa]

@tmorehouse I made a pull request. It’s mainly with your explanatory comment 😃