When working on my Vue project, I encountered an issue while using Vee-Validate and Axios.
During an API call to register a user, if the email is already in use, an error is thrown. To handle this error and display the error message, I used the following code:
this.loading = true;
this.$http.post('v1/auth/register', {
first_name: this.first_name,
last_name: this.last_name,
email: this.email,
phone: this.phone,
password: this.password
}).then((response) => {
this.registration_card = 2;
}).catch(error => {
if (error.data.error.message === "email_already_exists") {
let input = this.$refs['email'].$children[0];
input.errors.add({
field: 'email',
msg: 'email already in use'
});
this.loading = false;
}
});
After adding the error message and disabling the loading icon within the button component, I noticed that the error message was not displaying or being added to the error bag. Upon further investigation, I discovered a solution by making a small change in the button component:
<loading v-if="loading"/>
I changed it to:
<loading v-show="loading"/>
By making this adjustment, {{this.errors}} now shows the error items and the error message is displayed as intended.
Although the modified code solved the issue, I am still curious why it didn't work with v-if. It makes me wonder about the connection between the button component and the error bag.