Vue form Wizard prevent back step

Question

we are working with injection of dynamic components by server response, but once the user has approved a step, we will prevent him from going back to the steps he has already approved.

HTML

JS

Vue.use(VueFormWizard)
Vue.component('step1', {
 template:`  My first tab content 

             `
 }
)
Vue.component('step2', {
 template:`  My second tab content `
})
Vue.component('step3', {
 template:`  My third tab content `
})
Vue.component('step4', {
template:` Yuhuuu! This seems pretty damn simple `
})
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!');
   }
  }
})

but we have not found answers in the documentation if suddenly someone has had this problem and can tell us how to solve it, I would appreciate it, thanks.

user_661872 · Answer

Once the user has approved a step, we will prevent him from going back to the steps he has already approved.

Validate going forward, then simply remove the back button.

I did some tests and the beforeTabSwitch doesn't fire if going backwards props.prevTab(), shame as you could then do it in the validate call.

Here is an example, which validates going forward and removes the Previous button and prevents navigating via the header (wizard-step).

Vue.use(VueFormWizard)
Vue.component('step1', {
  template: `  My first tab content`,
  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: `  My second tab content `,
  data: () => ({
    logged_in_yada: ''
  }),
  methods: {
    validate() {
      this.$emit('on-validate', this.$data, true)
      return true
    }
  }
})
Vue.component('step3', {
  template: `  My third tab content `,
  data: () => ({
    additional_info: ''
  }),
  methods: {
    validate() {
      this.$emit('on-validate', this.$data, true)
      return true
    }
  }
})
Vue.component('step4', {
  template: ` Yuhuuu! This seems pretty damn simple `,
  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)
      }
    }
  }
})








  
    
      
      
      
        
      
      
    

    {{ tabModel }}

user_16335044 · Answer

use this CSS instead:

.vue-form-wizard .wizard-nav-pills a, .vue-form-wizard .wizard-nav-pills li{
  cursor: not-allowed;
  pointer-events: none;
}

Vue form Wizard prevent back step

2 Answers