Detect "Next" click to perform call then proceed to next step on success

[ianarsenault]

Following your example, I'm trying to have a user fill out a simple form. I'd like to keep the button disabled until vuelidate does it's thing, and once everything checks out allow the button to be clickable.

When it's "clickable" + clicked I'd like to call a function and upon success, go to the next step.

How do I go about detecting next button click, and how do I prevent from going to next step until I want to?

I'm currently at where I can save to the DB once there are no vuelidate errors. However I would like it so that it only saves once the user clicks "Next"

<script>
    import {validationMixin} from 'vuelidate'
    import {required, email, sameAs, minLength } from 'vuelidate/lib/validators'
    import UserService from '@/services/UserService'

    export default {
      name: "StepOne",
      props: ['clickedNext', 'currentStep'],
      mixins: [validationMixin],
      data() {
        return {
          user: {
            username: '',
            email: '',
            password: '',
            confirmPassword: ''
          }
        }
      },
      validations: {
        user: {
          username: {
            required
          },
          email: {
            required,
            email
          },
          password: {
            required,
            minLength: minLength(8)
          },
          confirmPassword: {
            required,
            minLength: minLength(8),
            sameAsPassword: sameAs('password')
          }
        }
      },
      watch: {
        $v: {
          handler: function (val) {
            if(!val.$invalid) {
              this.addUser()
              this.$emit('can-continue', {value: true});
            } else {
              this.$emit('can-continue', {value: false});
            }
          },
          deep: true
        },
        clickedNext(val) {
          console.log(val)
          if(val === true) {
            this.$v.user.$touch();
          }
        }
      },
      mounted() {
        if(!this.$v.$invalid) {
          this.$emit('can-continue', {value: true});
        } else {
          this.$emit('can-continue', {value: false});
        }
      },
      methods: {
        async addUser() {
          await UserService.addUser(this.user).then(res => {
            if (res.data.errors) {
              this.errors = res.data.errors // display errors
              this.errorAlert() // alert 
            } else {
               console.log('successfully saved information')
              // Now allow the stepper to go to the next step
            }
          })
        }
      }
    }

[Edujugon]

Hi @ianarsenault ,

We've just released a new package version (1.3.0). Here you can find a new event which is emitted before newStep action. So you can easily accomplish your goal.

Below example exposes how you can use it:

<div class="column is-8 is-offset-2">
     <horizontal-stepper @before-next-step="beforeNextStep" :steps="demoSteps" @completed-step="completeStep" :top-buttons="true" @active-step="isStepActive" @stepper-finished="alert">
     </horizontal-stepper>
</div>

.
.
.
methods: {
    beforeNextStep ({ currentStep }, next) {
         // Here your logic
         ........

        // Then next
        next() 
    }
.
.
.

Don't forget calling next() just after your check. If you don't want to continue just call next(false)

You also have access to the current step. so you can check currentStep.name or currentStep.index

Hope this helps

[ianarsenault]

Thank you @Edujugon !

[MpEliaz]

Hi! the event is triggered when the next button is disabled, how i can to fix it?