Reputation: 642
I am getting a 422 response from the server when expected and the correct server-side messages appear in the console but I cant seem to get these messages to display in my view. Any ideas?
I am using Laravel 5.6 with Vue.js 2 and Axios and following the lessons for Vus.js on laracasts (great lessons).
<template>
<div class="container">
<div class="page-header">
<h1>Create Person</h1>
</div>
<form @submit.prevent="onSubmit" action="POST">
<div>
<label for="fname" class="col-md-3 control-label ">First Name:</label>
<div class="col-md-8">
<input type="text" name="fname" v-model='fname' id="fname" autocomplete='off'>
<span v-text="errors.get('fname')"></span>
</div>
</div>
<div>
<label for="lname" class="col-md-3 control-label ">Last Name:</label>
<div class="col-md-8">
<input type="text" name="lname" v-model='lname' id="lname" autocomplete='off'>
<span v-text="errors.get('lname')"></span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="submit" class="btn btn-trans-green square pull-right card-1">
Submit
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</template>
<script>
class Errors {
constructor(){
this.errors = {};
}
get(field){
if (this.errors[field]){
return this.errors[field][0];
}
}
record(errors){
this.errors = errors;
}
}
export default {
data: function() {
return {
fname:'',
lname:'',
errors: new Errors()
}
},
methods: {
onSubmit(){
axios.post('/customers', this.$data)
.then(response => alert('Success'))
.catch(error =>
this.errors.record(error.response.data));
}
}
}
</script>
Upvotes: 0
Views: 881
Reputation: 35220
In Laravel 5.5 (I think) the JSON response for validation errors changed from being just an object of errors to an object containing errors and a single message. So to access the error messages in the response you will actually need to do:
this.errors.record(error.response.data.errors)
I would suggest, if you don't have it already, to get Vue Devtools the addon/extension to help you debug your code and just see what's going on in general.
Finally, just an FYI, Spatie made a package for this a while back (based on Jeff's lesson). You could use it as a point of reference if you're just going through the lessons and want to build it yourself.
Spatie - Form Backend Validation
Upvotes: 1