How to Show Laravel Vue Js Errors - vue.js

Question

I am learning Vue.js I have successfully made this registration form and its working fine
but I'm having a problem in showing errors.
register.vue page
<form #submit.prevent="RegisterUser" aria-label="Register">
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">Name</label>
<div class="col-md-6">
<!-- <input id="name" v-model="name" type="text" class="form-control" name="name" value="" required autofocus> -->
<input type="text" v-model="name" class="form-control" required="required" autofocus="autofocus">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">Email Address</label>
<div class="col-md-6">
<!-- <input id="email" v-model="email" type="email" class="form-control" name="email" value="" required> -->
<input type="email" v-model="email" required autofocus class="form-control">
{{ errors.email }}
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
<div class="col-md-6">
<!-- <input id="password" v-model="password" type="password" class="form-control" required> -->
<input type="password" v-model="password" class="form-control" required>
</div>
</div>
<div class="form-group row">
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">Confirm Password</label>
<div class="col-md-6">
<!-- <input id="password-confirm" v-model="password_confirmation" type="password" class="form-control" required> -->
<input type="password" v-model="confirm_password" class="form-control" required>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
Register
</button>
</div>
</div>
</form>
This is my scripts in register.vue page working registration fine
<script>
export default {
// props: ['name'],
data: function() {
return {
name: '',
email: '',
password: '',
confirm_password: '',
errors: {},
};
},
methods: {
RegisterUser() {
axios.post('/register', {
name: this.name,
email: this.email,
password: this.password,
password_confirmation:this.confirm_password
})
.then(function(response){
swal({
title: "Good job!",
text: "Login Success",
icon: "success",
button: "Okay",
})
.then((willDelete) => {
if (willDelete) {
window.location.href = '/home';
}
});
})
.catch(function (error) {
console.log(error.response.data);
});
}
}
}
</script>
This is the Errors I want to fetch...
How to fetch and how this errors on my vue components?

Answer 1

Note!! This solution is based on ES6 so you might have to transpile this to ES5
I had this issue a while back so I wrote a simple class to help manage validation messages from the server. https://gist.github.com/nonsocode/e6f34a685f8be1422c425e3a20a69a4b
You can use it by importing this to your template
import ErrorBag from 'path-to-errorbag-class'
and use it in your data method like so
data: function() {
return {
name: '',
email: '',
password: '',
confirm_password: '',
errors: new ErrorBag,
};
},
In your template, you can check if there's a validation error and then decide how you ant to handle it. I'll assume you're using bootsrap 4
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">Email Address</label>
<div class="col-md-6">
<input type="email" v-model="email" required autofocus :class="{'form-control': true, 'is-invalid': errors.has('email')}">
<div class="invalid-feedback" v-if="errors.has('email')" >{{ errors.first('email') }}</div>
</div>
</div>
in the catch method of your ajax request,
axios(...)
.then(...)
.catch(function (error) {
if (error.response && error.response.status == 422) {
const errors = err.response.data.errors;
this.errors.setErrors(errors);
}
});
After successfully submitting to your server, you can call the clearAll method on the errorbag to clear all errors from the bag