[Vuejs]-Nuxtjs multi-step-form validations needs to be popped-up when clicking on the nuxt-link button using vee-validate

by

0👍

The footer component doesn’t have access to its parent’s ref so you cannot validate from there, instead let it emit a continue event and have the parent listen for it and trigger validation accordingly.

footer.vue

<template>
    <section>
    <b-row>
    <b-col>
        <nuxt-link v-if="continueToNextPage() != 'null'" class="applyContinue" :to="continueToNextPage()">Continue</nuxt-link>
      </b-col>
    </b-row> 
    </section>   
</template>

<script>
export default {
  methods: {
    continueToNextPage(){
      this.$emit('continue');
    }
  }
}
</script>

And the parent component:

<ValidationObserver ref="form" v-slot="{ invalid }">
  <!-- .... -->
</ValidationObserver>

<footer @continue="$refs.form.validate()"></footer>

Leave a comment