CODEWITHSUNDEEP
vue.jsbootstrap-vue
MariaZ
MariaZ

Reputation: 1747

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

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

Upvotes: 3

Views: 3488

Answers (2)

Hiws
Hiws

Reputation: 10364

This happens because you can't swap to a tab that's disabled. And the check happens before the index is disabled, meaning it will set the tab index back to 0.

You can get around this by using two data properties, one for disabling the tabs, and one for the <b-tabs> v-model. Then updating the property using for disabling first, and the v-model property in the a $nextTick callback.

In the example below i utilize a watcher to set the second property automatically when the other changes.

new Vue({
  el: '#app',
  data() {
    return {
      currentTab: 0,
      disabledTabIndex: 0
    }
  },
  watch: {
    disabledTabIndex(newVal) {
      this.$nextTick(() => {
        this.currentTab = newVal;
      })
    }
  }
});
<link href="https://unpkg.com/[email protected]/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>

Upvotes: 2

Majed Badawi
Majed Badawi

Reputation: 28424

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>

Upvotes: 1

Related Questions