TypeError: Cannot read property 'status' of undefined when receiving errors from Laravel validation

1
votes

I'm trying to validate a form via AJAX using Axios with vue.

axios.post('api/registro', this.sede)
.then(response => {

    this.$emit('cerrar')

})
.catch(err => {

    console.log(err)

})

The error comes from the catch part, as it's coming from a Laravel validator. The response from the server is 422 and it contains a JSON with a message and the errors the server is sending.

Everything works fine if I dont try to log the error.

2
laravelvue.jsaxios
Where are you reading the status property? - D Malan

2 Answers

2
votes

The problem was coming from me using interceptors in axios, I wasn't returning the errors in the interceptors properly, so nothing was coming into the catch function.

This is what I had:

axios.interceptors.response.use(null, function (error) {
    // some logic
  });

And this is how it should've been:

axios.interceptors.response.use(null, function (error) {
    // some logic
    return Promise.reject(error);
  });

Thank you all so much for your help.

1
votes

You can just check for errors like so:

if(err.response.data.errors){
  this.errors = err.response.data.errors;
}

this.errors would be an array you can loop through using v-for to display it