Bootstrap Vue Tab组件使用索引导航失效 点击按钮tabIndex不递增

• 问题核心是b-tabs组件v-model绑定的tabIndex变量同时被用作了tab禁用状态的判断条件，形成了循环依赖逻辑冲突。
• Bootstrap Vue的b-tabs内置了有效性校验逻辑：当v-model传入的索引值对应tab处于禁用状态时，组件会自动将v-model值回滚为最近的可用索引，避免出现选中禁用项的异常。
• 触发tabIndex++操作时，b-tabs监听到v-model变化后会立即校验目标索引的可用性，此时tab禁用状态的计算依赖的tabIndex值和组件校验时序存在冲突，导致组件判定目标索引对应tab仍为禁用状态，直接将tabIndex回滚为初始值0。

使用独立变量控制tab的开放权限，避免和v-model绑定的激活索引产生逻辑冲突，修改后代码如下：

<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="allowTabLevel < 1">
       I'm the second tab
     </b-tab>
     <b-tab title="Premium Plan" :disabled="allowTabLevel < 2">
       Sibzamini!
     </b-tab>
   </b-tabs>
  </b-card>

 <button @click="allowTabLevel++; tabIndex = allowTabLevel">
  Click to toggle disable
 </button>
</div>

JS部分新增独立控制变量即可：

new Vue({
  el: '#app',
  data() {
    return {
      tabIndex: 0,
      // 新增独立变量控制允许开放的tab最大层级
      allowTabLevel: 0
    }
  }
})

该方案通过独立变量allowTabLevel控制tab开放权限，点击按钮时先升级开放层级，再同步激活索引到最新层级，完全规避了原有循环依赖导致的校验冲突问题。

内容的提问来源于stack exchange，提问作者MariaZ