如何通过单击选项卡而不使用 vuejs vue-form-wizard 中的下一步按钮来切换选项卡？

Question

我正在使用 vue-form-wizard 在 vuejs 中创建选项卡。第一次直接单击选项卡时，我无法将第一个选项卡导航到第二个或第三个选项卡。一旦我们通过单击下一步按钮导航所有选项卡，那么我们就可以通过直接选择选项卡而不使用下一步按钮来移动任何选项卡。就我而言，我将隐藏下一个按钮。如果我隐藏此按钮，如何导航其他选项卡？请在下面找到我的代码。

https://jsfiddle.net/bt5dhqtf/1241/

<div id="app">
<div>
        <form-wizard @on-complete="onComplete" 
                      shape="square"
                      layout="vertical"
                      steps-classes="steps-size"
                      color="#3498db">
            <tab-content title="Personal details"
                         icon="ti-user" v-if="t2=='y'">
              My first tab content
            </tab-content>
            <tab-content title="Additional Info"
                         icon="ti-settings" v-if="t3=='y'">
              My second tab content
            </tab-content>
            <tab-content title="Last step"
                         icon="ti-check">
              Yuhuuu! This seems pretty damn simple
            </tab-content>
        </form-wizard>
 </div>
</div>

Vue.use(VueFormWizard)
new Vue({
 el: '#app',
 data(){return{
 t1:'y',
 t2:'y',
 t3:'y',
 }

 },
 created:{
 //this.t2='y',
 },
 methods: {
  onComplete: function(){
      alert('Yay. Done!');
   }
  }
})

Answer 1

只需使用 nextTab 方法

在向导组件中添加 ref： <form-wizard ref="wizard"...

<tab-content title="Additional Info" icon="ti-settings">

    My second tab content
    <button @click="goNext">
        go next
    </button>
</tab-content>

methods:
    goNext() {
        //alert(this.$refs.wizard.activeTabIndex);
        this.$refs.wizard.nextTab();
    },