title: VueJs: Bootstrap Vue How to disable Tabs header and navigate through button in bootstrap
body: <p>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.</p>
  
  <p>However when i tried to increment the tab index, that is automatically being set to zero again.</p>
  
  <p>Is there any way to disable the tab click, but navigate them through previous and next button.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#app',
    data: {
        tabIndex:0
     }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/&gt;
  &lt;link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/&gt;
  
  &lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
  &lt;script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"&gt;&lt;/script&gt;
  &lt;script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"&gt;&lt;/script&gt;
  
  
  &lt;div id="app"&gt;
  &lt;b-card no-body &gt;
    &lt;b-tabs warning pills card vertical v-model="tabIndex" class="generictab" ref="wizard"&gt;
      &lt;b-tab title="Tab Contents 1"&gt;
                &lt;b-row&gt;
                &lt;b-col sm="12"&gt;
                  &lt;b-form-group&gt;
                    &lt;label for="name"&gt;Name&lt;/label&gt;
                    &lt;b-form-input type="text" id="name" placeholder="Enter your name"&gt;&lt;/b-form-input&gt;
                  &lt;/b-form-group&gt;
                &lt;/b-col&gt;
            &lt;/b-row&gt;
      &lt;/b-tab&gt;
      &lt;b-tab title="Tab Contents 2" :disabled="!(tabIndex==2)"&gt;
        Tab Contents 2
      &lt;/b-tab&gt;
      &lt;b-tab title="Tab Contents 3" :disabled="!(tabIndex==3)"&gt;
        Tab Contents 3
      &lt;/b-tab&gt;
    &lt;/b-tabs&gt;
        &lt;div class="text-center"&gt;
        &lt;b-button-group class="mt-2"&gt;
          &lt;b-btn @click="tabIndex--"&gt;Previous&lt;/b-btn&gt;
          &lt;b-btn @click="tabIndex++"&gt;Next&lt;/b-btn&gt;
        &lt;/b-button-group&gt;
        &lt;br&gt;
        &lt;span class="text-muted"&gt;Current Tab: {{tabIndex}}&lt;/span&gt;
      &lt;/div&gt;
  &lt;/b-card&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>