Bootstrap vue Tab component is not working when an Index is used to navigate trough the tabs

Question

Why this very simple bootstrap vue script does not work, on pressing the toggle button it just does not increment the value tabIndex.

• tabIndex starts in 0, user presses tabIndex, value still 0.

• if tabIndex is removed from disabled attribute it will work but it will not follow the purpose I require. Script can be seen here: https://jsfiddle.net/Xarina/tkoyph4x/1/

  <div id="app">
    <b-card no-block>{{tabIndex}}
     <b-tabs small card ref="tabs" v-model="tabIndex">
       <b-tab title="General">
         I'm the first fading tab
       </b-tab>
       <b-tab title="Edit profile" :disabled="tabIndex < 1">
         I'm the second tab
       </b-tab>
       <b-tab title="Premium Plan" :disabled="tabIndex < 2">
         Sibzamini!
       </b-tab>
     </b-tabs>
    </b-card>
  
   <button @click="tabIndex++">
    Click to toggle disable
   </button>
  </div>
  

Answer 1

You can bind a custom class to each tab using title-item-class according to the tabIndex:

window.app = new Vue({
  el: '#app',
  data: () => ({ tabs: [], tabCounter: 0, disabled: false, tabIndex: 0 }),
});

.disabledTab .nav-link {  pointer-events: none; color: #666666; }

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/babel-polyfi0ll@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-card no-block>{{tabIndex}}
    <b-tabs small card ref="tabs" v-model="tabIndex">
      <b-tab title="General">I'm the first fading tab</b-tab>
      <b-tab title="Edit profile" :title-item-class="{ disabledTab: tabIndex < 1 }">I'm the second tab</b-tab>
      <b-tab title="Premium Plan" :title-item-class="{ disabledTab: tabIndex < 2 }">Sibzamini!</b-tab>
    </b-tabs>
  </b-card>
  <button @click="tabIndex++">Click to toggle disable</button>
</div>