prevent event change Tab

Question

In BootstrapVue Tabs, when we click on a tab for change to another tab => event click will fire. I need to do some validation after the event click fire. Then if it fails, I will cancel that event and prevent the tab to change. But I cant find any method in BootstrapVue documentation to do that. I need your help !!

<b-tabs pills content-class="mt-3" v-model="tabIndex" >
   <b-tab title="Profile" active @click="onChange" id="test" title-item-class="btnTab"> 
       <information @changeTab="changeTabInformation" ></information>
   </b-tab>
   <b-tab title="Preferences" @click="onChange"  title-item-class="btnTab">
       <preference  @changeTab="changeTabPreference" ></preference>
   </b-tab>
</b-tabs>

(Hope that u can understand me because my writing skills in English is terrible :( )

Does changing your `@click="onChange"` to `@click.stop="onChange"` prevent the tab change? — ezero, Sep 20 '19 at 20:50

score 1 · Answer 1 · answered Feb 24 '20 at 05:02

You do something like this. Use activate-tab event...

<b-tabs card v-on:activate-tab="tabActivated">
      <b-tab> ...</b-tab>
      <b-tab> ...</b-tab>
</b-tabs>

Then in

methods:{    
  tabActivated(newTabIndex,oldTabIndex, event){
    if(youValidationFailed){
      event.preventDefault();
   }
},

score 0 · Answer 2 · answered Sep 20 '19 at 20:42

Unfortunately this is not possible. Can't you solve your problem with making the tab disabled till all requirements are met to go to the tab using a computed value?

<div id='app'>
  <div>
  <b-card no-body>
    <b-tabs card>
      <b-tab title="Tab 1">
        <b-btn @click="counter++">increase</b-btn>
      </b-tab>
      <b-tab title="Tab 2" :disabled="status" >
        <b-card-text>Tab Contents 2</b-card-text>
      </b-tab>
    </b-tabs>
  </b-card>
     {{counter}}
</div>
</div>

JS:

new Vue({
  el: "#app",
  data: {
    counter: 0,
  },
  computed: {
    status: function() {
      return this.counter < 2
    }
  }
});

Yeah, disabling the other b-tab's is the best bet, and enabling them when some condition in the previous tab content (i.e. child form) has been met. Which would be more intutitive to keyboard only users or screen reader users... as they wouldn't know why clicking a link (the tab button) isn't working. — Troy Morehouse, Sep 21 '19 at 17:57

prevent event change Tab

2 Answers2