将上一个按钮添加到 vue-form-wizard 选项卡内容

【问题标题】：Add previous button to vue-form-wizard tab content将上一个按钮添加到 vue-form-wizard 选项卡内容
【发布时间】：2020-09-29 12:40:15
【问题描述】：

我正在开发一个 vue 表单向导 (https://github.com/BinarCode/vue-form-wizard)

而不是在页脚中有一个上一个按钮，我需要在第二个选项卡内容内容中添加一个按钮。

我尝试了类似的方法，但它不起作用：

<tab-content title="second tab">
    <button @click="previousTab">Take me back to the previous tab</button>
</tab-content>

如何在 StepForm.vue 中的第二步内容中添加上一个按钮？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

好吧，您只需要给FormWizard 一个参考。然后使用该引用访问FormWizard 并在按钮的单击处理程序中调用FormWizard 的prevTab() 方法

 <form-wizard @on-complete="onComplete" 
                      shape="square"
                      color="#3498db" ref="formWiz">
            <tab-content title="Personal details"
                         icon="ti-user">
              My first tab content
            </tab-content>
            <tab-content title="Additional Info"
                         icon="ti-settings">
              My second tab content
              <div>
              <button @click="goBack">GO BACK !</button>
              </div>
            </tab-content>
            <tab-content title="Last step"
                         icon="ti-check">
              Yuhuuu! This seems pretty damn simple
            </tab-content>
</form-wizard>

Vue.use(VueFormWizard)
new Vue({
  el: '#app',
  methods: {
    onComplete: function() {
      alert('Yay. Done!');
    },
    goBack() {
      this.$refs.formWiz.prevTab()
    }
  }
})

Fiddle

【讨论】：