Vue表单向导防止退步

Question

我们正在通过服务器响应注入动态组件，但是一旦用户批准了一个步骤，我们将阻止他返回他已经批准的步骤。

HTML

<div id="app">
<div>
  <form-wizard @on-complete="onComplete">
    <tab-content v-for="tab in tabs"
                v-if="!tab.hide"
                :key="tab.title"
                :title="tab.title"
                :icon="tab.icon">
      <component :is="tab.component"></component>
    </tab-content>
  </form-wizard>
 </div>
</div>

JS

Vue.use(VueFormWizard)
Vue.component('step1', {
 template:` <div> My first tab content <br>
             </div>`
 }
)
Vue.component('step2', {
 template:`<div>  My second tab content </div>`
})
Vue.component('step3', {
 template:`<div>  My third tab content </div>`
})
Vue.component('step4', {
template:`<div> Yuhuuu! This seems pretty damn simple </div>`
})
new Vue({
 el: '#app',
 data() {
    return {
    tabs: [{title: 'Personal details', icon: 'ti-user', component: 'step1'}, 
    {title: 'Is Logged In?', icon: 'ti-settings', component: 'step2', hide: false}, 
    {title: 'Additional Info', icon: 'ti-location-pin', component: 'step3'},
    {title: 'Last step', icon: 'ti-check', component: 'step4'},
    ],
  }
 },
 methods: {
  onComplete: function(){
      alert('Yay. Done!');
   }
  }
})

但是如果突然有人遇到这个问题并且可以告诉我们如何解决它，我们还没有在文档中找到答案，我将不胜感激，谢谢。

Answer 1

一旦用户批准了一个步骤，我们将阻止他返回 到他已经批准的步骤。

验证前进，然后简单地删除后退按钮。

我做了一些测试，如果后退 props.prevTab()，beforeTabSwitch 不会触发，遗憾的是你可以在 validate 调用中执行此操作。

这是一个示例，它验证前进并删除上一步按钮并防止通过标题导航（向导步骤）。

Vue.use(VueFormWizard)
Vue.component('step1', {
  template: ` <div> My first tab content</div>`,
  data: () => ({
    name: ''
  }),
  methods: {
    validate() {
      // change `true` to things checked on model, beyond scope of question
      this.$emit('on-validate', this.$data, true)
      return true
    }
  }
})
Vue.component('step2', {
  template: `<div>  My second tab content </div>`,
  data: () => ({
    logged_in_yada: ''
  }),
  methods: {
    validate() {
      this.$emit('on-validate', this.$data, true)
      return true
    }
  }
})
Vue.component('step3', {
  template: `<div>  My third tab content </div>`,
  data: () => ({
    additional_info: ''
  }),
  methods: {
    validate() {
      this.$emit('on-validate', this.$data, true)
      return true
    }
  }
})
Vue.component('step4', {
  template: `<div> Yuhuuu! This seems pretty damn simple </div>`,
  data: () => ({
    last_step: ''
  }),
  methods: {
    validate() {
      this.$emit('on-validate', this.$data, true)
      return true
    }
  }
})
new Vue({
  el: '#app',
  data() {
    return {
      tabModel: {},
      tabs: [{
          title: 'Personal details',
          icon: 'ti-user',
          component: 'step1'
        },
        {
          title: 'Is Logged In?',
          icon: 'ti-settings',
          component: 'step2',
          hide: false
        },
        {
          title: 'Additional Info',
          icon: 'ti-location-pin',
          component: 'step3'
        },
        {
          title: 'Last step',
          icon: 'ti-check',
          component: 'step4'
        },
      ],
    }
  },
  methods: {
    onComplete: function() {
      alert('Yay. Done!');
    },
    validateStep(name) {
      return this.$refs[name][0].validate()
    },
    mergeTabModel(model, isValid) {
      if (isValid) {
        // merging each step model into the final model
        this.tabModel = Object.assign({}, this.tabModel, model)
      }
    }
  }
})

<script src="https://vuejs.org/js/vue.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-form-wizard/dist/vue-form-wizard.min.css">
<script src="https://unpkg.com/vue-form-wizard/dist/vue-form-wizard.js"></script>
<link rel="stylesheet" href="https://rawgit.com/lykmapipo/themify-icons/master/css/themify-icons.css">


<div id="app">
  <div>
    <form-wizard @on-complete="onComplete">
      <wizard-step slot-scope="props" slot="step" :tab="props.tab" :transition="props.transition" :index="props.index">
      </wizard-step>
      <tab-content v-for="tab in tabs" v-if="!tab.hide" :key="tab.title" :title="tab.title" :icon="tab.icon" :before-change="()=>validateStep(tab.component)">
        <component :is="tab.component" :ref="tab.component" @on-validate="mergeTabModel"></component>
      </tab-content>
      <template slot="footer" scope="props">
        <div class="wizard-footer-left">
          <!-- remove previous button -->
          <!-- <wizard-button v-if="props.activeTabIndex > 0 && !props.isLastStep" @click.native="props.prevTab()" :style="props.fillButtonStyle">Previous</wizard-button> -->
        </div>
        <div class="wizard-footer-right">
          <wizard-button @click.native="props.nextTab()" class="wizard-footer-right finish-button" :style="props.fillButtonStyle">{{props.isLastStep ? 'Done' : 'Next'}}</wizard-button>
        </div>
      </template>
    </form-wizard>

    <pre>{{ tabModel }}</pre>
  </div>
</div>