When you post data from Vue app to the server via Rest Api, server will validate the request. If validation fails server sends the response to app with error messages.
So how do you show these error messages in your Vue app?
For example, you have entered invalid email and response will be like this
So once you get the response you have to show the error message below the respective form element
VeeValidate has got two ways to do this.
ValidationObserver
ValidationProvider
Since the response comes with states code 422, you can access the error object inside the catch()
statement of the axios promise
.catch(error => { this.$refs.observer.setErrors(error.response.data.errors) });
This pass the error object to the ValidationObserver
named observer. You see the following code of your Vue component. Here I have wrapped email fileld with ValidationProvider
and ValidationObserver
<template> <ValidationObserver ref="observer"> <div class="control"> <ValidationProvider rules="required" vid="email" name="Email" v-slot="{ errors }"> <input class="input is-small" type="text" v-model="email"> <span class="error">{{ errors[0] }}</span> </ValidationProvider> </div> </ValidationObserver> </template>
By looking at the following diagram you can understand how the response errors are displayed in your Vue code
If you want to manually update only single field you can use the following code
.catch(error => { this.$refs.email.setErrors(error.response.data.errors.email) });