Search code examples
vue.jsvee-validate

Can't go to next step after going back using vee-validate

I'm using vee-validate v3 to validate a multi step form then call axios. I use handleSubmit and added ValidationObserver with unique keys for each step. Now my issue is after moving to the next step and then going back to step 1, the next button is not firing even if there's no field errors found.

Here's the code structure: https://codesandbox.io/s/codesandbox-forked-6hrh4?file=/src/Demo.vue

Note:

  • the currentStep on my real project is from local storage.
  • The sample code is just the structure since the actual fields are too long.
Solution

  • A <button> placed inside a <form> element defaults to type="submit".

    Which means in any <form> you need to call preventDefault() on a <button> click if you don't want the form submitted.

    Changing @click into @click.prevent fixes the issue (because the form is no longer submitted when clicking Previous, therefore currentStep is no longer increased by 1 right after it is decreased by the @click expression - making it look like nothing happened. In fact, both the @click expression and the onSubmit get executed if you don't use .prevent modifier).

    As an alternative, you can change the <button> into an anchor:

    <a href class="btn" @click="currentStep--" v-text="Previous" />

    although I'd personally go with preventing default.