当使用索引导航选项卡时，Bootstrap vue Tab 组件不起作用

Question

为什么这个非常简单的 vue 引导脚本不起作用，在按下切换按钮时它不会增加 tabIndex 的值。

• tabIndex从0开始，用户按下tabIndex，值还是0。

• 如果 tabIndex 从 disabled 属性中删除，它将起作用，但不会达到我要求的目的。 脚本可以在这里看到： 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

您可以根据tabIndex 使用title-item-class 将自定义类绑定到每个tab：

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>

Answer 2

发生这种情况是因为您无法切换到已禁用的标签。并且检查发生在索引被禁用之前，这意味着它将选项卡索引设置回0。

您可以通过使用两个数据属性来解决此问题，一个用于禁用选项卡，一个用于<b-tabs> v-model。然后首先使用 for 禁用更新属性，并在 $nextTick 回调中更新 v-model 属性。

在下面的示例中，我使用watcher 在其他属性更改时自动设置第二个属性。

new Vue({
  el: '#app',
  data() {
    return {
      currentTab: 0,
      disabledTabIndex: 0
    }
  },
  watch: {
    disabledTabIndex(newVal) {
      this.$nextTick(() => {
        this.currentTab = newVal;
      })
    }
  }
});

<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

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