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

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

1 个答案: