vue.js - 如何通过单击选项卡来切换选项卡而不使用 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方法

在向导组件中添加引用: <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();
    },