VueJs: Bootstrap Vue How to disable Tabs header and navigate through button in bootstrap

Question

I am trying bootstrap vue tab for my application. I wanted to disable all the tab click, but wanted to navigate through the tabs using the navigation button.

However when i tried to increment the tab index, that is automatically being set to zero again.

Is there any way to disable the tab click, but navigate them through previous and next button.

new Vue({
  el: '#app',
  data: {
      tabIndex:0
   }
})

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

<script src="https://unpkg.com/vue"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>


<div id="app">
<b-card no-body >
  <b-tabs warning pills card vertical v-model="tabIndex" class="generictab" ref="wizard">
    <b-tab title="Tab Contents 1">
              <b-row>
              <b-col sm="12">
                <b-form-group>
                  <label for="name">Name</label>
                  <b-form-input type="text" id="name" placeholder="Enter your name"></b-form-input>
                </b-form-group>
              </b-col>
          </b-row>
    </b-tab>
    <b-tab title="Tab Contents 2" :disabled="!(tabIndex==2)">
      Tab Contents 2
    </b-tab>
    <b-tab title="Tab Contents 3" :disabled="!(tabIndex==3)">
      Tab Contents 3
    </b-tab>
  </b-tabs>
      <div class="text-center">
      <b-button-group class="mt-2">
        <b-btn @click="tabIndex--">Previous</b-btn>
        <b-btn @click="tabIndex++">Next</b-btn>
      </b-button-group>
      <br>
      <span class="text-muted">Current Tab: {{tabIndex}}</span>
    </div>
</b-card>
</div>

Pradeepb Pradeepb · Accepted Answer · 2018-05-25T14:49:27

As per my understanding, you want to navigate by clicking next and prev buttons and not by clicking on the tab name. Here is the working example. Hope it helps.

new Vue({
  el: '#app',
  data: {
      tabIndex:0
   }
})

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

<script src="https://unpkg.com/vue"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<style>
  .disabledTab{
      pointer-events: none;
  }
</style>

<div id="app">
<b-card no-body >
  <b-tabs warning pills card vertical v-model="tabIndex" class="generictab" ref="wizard">
    <b-tab title="Tab Contents 1" title-item-class="disabledTab">
              <b-row>
              <b-col sm="12">
                <b-form-group>
                  <label for="name">Name</label>
                  <b-form-input type="text" id="name" placeholder="Enter your name"></b-form-input>
                </b-form-group>
              </b-col>
          </b-row>
    </b-tab>
    <b-tab title="Tab Contents 2" title-item-class="disabledTab">
      Tab Contents 2
    </b-tab>
    <b-tab title="Tab Contents 3" title-item-class="disabledTab">
      Tab Contents 3
    </b-tab>
  </b-tabs>
      <div class="text-center">
      <b-button-group class="mt-2">
        <b-btn @click="tabIndex--">Previous</b-btn>
        <b-btn @click="tabIndex++">Next</b-btn>
      </b-button-group>
      <br>
      <span class="text-muted">Current Tab: {{tabIndex}}</span>
    </div>
</b-card>
</div>

VueJs: Bootstrap Vue How to disable Tabs header and navigate through button in bootstrap

1 Answers