VeeValidate with API Response

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.

• Use the setErrors() of the ValidationObserver
• Use the setErrors() of the 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)
  });