Vue.js 如何在vuejs vue表单向导中单击tab而不使用next按钮来切换选项卡?

Vue.js 如何在vuejs vue表单向导中单击tab而不使用next按钮来切换选项卡?,vue.js,Vue.js,我正在使用vue表单向导在vuejs中创建选项卡。我无法在第一次直接单击选项卡时将第一个选项卡导航到第二个或第三个选项卡。单击“下一步”按钮浏览所有选项卡后,我们可以通过直接选择选项卡来移动任何选项卡,而无需使用“下一步”按钮。在我的情况下,我将隐藏“下一步”按钮。如果隐藏此按钮,如何导航其他选项卡? 请在下面找到我的代码 简单使用nextTab方法 在向导组件中添加引用: 谢谢,我想知道为什么我不能从内容触发下一个选项卡,这对我来说很有效,缺少向导参考。 <div id="app">

我正在使用vue表单向导在vuejs中创建选项卡。我无法在第一次直接单击选项卡时将第一个选项卡导航到第二个或第三个选项卡。单击“下一步”按钮浏览所有选项卡后,我们可以通过直接选择选项卡来移动任何选项卡,而无需使用“下一步”按钮。在我的情况下,我将隐藏“下一步”按钮。如果隐藏此按钮,如何导航其他选项卡? 请在下面找到我的代码


简单使用nextTab方法

在向导组件中添加引用:
谢谢,我想知道为什么我不能从内容触发下一个选项卡,这对我来说很有效,缺少向导参考。
<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!');
   }
  }
})
<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();
    },