[英]Nuxtjs multi-step-form validations needs to be popped-up when clicking on the nuxt-link button using vee-validate
I'have separate components for all my pages to be navigated one after another if required fields are filled if not I should get all error messages as a pop-up if the required fields are not filled.如果未填写必填字段,则我的所有页面都有单独的组件进行逐个导航,如果未填写必填字段,我应该将所有错误消息作为弹出窗口显示。
We have used vee-validate library to display all the errors it is working fine, when we actually focusing on the input and not-filling it, we are able to see the error message, but when we are not focusing and directly clicking continue, I am not seeing any errors我们使用 vee-validate 库来显示所有错误它工作正常,当我们真正专注于输入而不是填充它时,我们能够看到错误消息,但是当我们没有专注并直接点击继续时,我没有看到任何错误
<template> <section> <ValidationObserver ref="form" v-slot="{ invalid }"> <form class="text-left"> <div> <select class="form-control w-25" v-model="name1" v-on:change="saveData($event)" > <option value="0">Please select</option> <option>1</option> <option>2</option> <option>3</option> </select> </div> <ValidationProvider rules="required" v-slot="{ errors }"> <div> <input type="text" v-model="firstName" v-on:change="saveData($event)" id="fname" /> <span style="color: red; font-Weight: bold; font-size: 12px">{{ errors[0] }}</span> </div> </ValidationProvider> <ValidationProvider rules="required" v-slot="{ errors }"> <div class="pb-2 pt-2"> <input type="text" v-model="lastName" v-on:change="saveData($event)" id="lname" placeholder /> <span style="color: red; font-Weight: bold; font-size: 12px">{{ errors[0] }}</span> </div> </ValidationProvider> </form> </ValidationObserver> <footer></footer> </section> </template> <script> import {ValidationProvider, ValidationObserver} from 'vee-validate'; import footer from '@component/footer'; components:{ ValidationProvider, ValidationObserver, footer } methods:{ saveData(event){ console.log(event) } } </script>
** Footer Component ** I have used validationObserver with refs also but, not able to trigger.validate() ** 页脚组件 ** 我也将validationObserver 与refs 一起使用,但无法触发.validate()
<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.$refs.validate() } } } </script>
Can you please help us in resolving this issue!你能帮我们解决这个问题吗!
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
组件无法访问其父级的 ref,因此您无法从那里进行验证,而是让它发出一个continue
事件并让父级监听它并相应地触发验证。
footer.vue页脚.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.