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

Question

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

tabIndex 从 0 开始，用户按下 tabIndex，值仍然是 0。

如果从 disabled 属性中删除 tabIndex，它会起作用，但不会达到我要求的目的。脚本可以在这里看到： 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 将自定义 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 模型。然后首先更新属性用于禁用，然后更新 $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>

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

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

vue.js

bootstrap-vue