Question

在BootstrapVue选项卡中，当我们单击一个选项卡以更改为另一个选项卡=>事件时，将触发。事件触发后，我需要做一些验证。然后，如果失败，我将取消该事件并阻止选项卡更改。但是我在BootstrapVue文档中找不到任何方法可以做到这一点。我需要你的帮助！

<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>

（希望您能理解我，因为我的英语写作能力很差:(）

Answer 1

您这样做。使用启动标签事件...

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

然后进入

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

Answer 2

不幸的是，这是不可能的。您不能解决这个问题，即在所有条件都满足之前使用计算值转到选项卡时，禁用选项卡吗？

<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
    }
  }
});

阻止事件更改选项卡

2 个答案: