How to change rule in behind catch of the axios using vee-validade

Question

I'm using the Vue vee-validity library, I'm managing to validate the fields normally before clicking the submit button.

However I want to do something, when I click on submit a post is made with the data. If there is a user error, I would like to inform in the input that the user is not available.

How can I access the methods inside catch on axios to inform a given message? or is there another alternative?

            <ValidationProvider 
              rules="required|min|max" 
              name="Username" 
              v-slot="{ errors }"
            >
              <b-field
                label="Username"
                :type="{ 'is-danger': errors[0] }"
                :message="errors"
              >
                <b-input v-model="username"></b-input>
              </b-field>
            </ValidationProvider>

     this.axios
      .post(...{ })
      .then(response => {})
      .catch(error => {
        if (error.response.status == 400){ // Invalid username and/or password }
        else if (error.response.status == 409){ // username already exists }
        else if(error.response.status == 500){ // Unknown Error }
    });

Ryley Ryley · Accepted Answer · 2020-04-08T15:15:09

ValidationProvider has a setErrors method for exactly this purpose. See the docs for details.

What you would do is something like this:

 <ValidationObserver ref="observer"> ...

 this.axios
  .post(...{ })
  .then(response => {})
  .catch(error => {
    if (error.response.status == 400){ // Invalid username and/or password }
       this.$refs.observer.setErrors({
         Username:['Invalid username and/or password']
       });
    else if (error.response.status == 409){ // username already exists }
    else if(error.response.status == 500){ // Unknown Error }
});

How to change rule in behind catch of the axios using vee-validade

1 Answers