Child component validation and event about vue-form-wizard HOT 2 CLOSED

Here is the solution I came up with https://jsfiddle.net/bt5dhqtf/591/

In your submit step, you change the step which triggers your server request and after that return a promise. The catch here is that the promise listens for a local event in your parent component. When that even is emitted, the promise resolves/rejects accordingly.

submitFirstStep() {
	this.step++
        return new Promise((resolve,reject)=>{
          this.$on('step-validated',(value)=>{
            resolve(value)
          })
        })
      },

In your stepCompleted event handler you simply emit the local event mentioned above

stepCompleted(data) {
  //Validation and error data is received here...
    this.$emit('step-validated',data)
 },

So you have a pretty simple solution.
Trigger before-change and return a promise which listens to a local event -> make your server request -> emit the event from your component to the parent - > listen for the event in the parent component -> emit a local event in the parent component which will resolve the promise.

This way you don't have to do any workarounds and you have all your data in place, based on which you can decide whether to restrict or allow going to the next step! Hope it helps

from vue-form-wizard.

@aredev I will try to re-create a jsFiddle and start from there.

from vue-form-wizard.