Getting my swal fire error to display in vue - laravel

Question

I'm using vue and laravel and I'm also using sweet alert 2 for my error messages and I'm trying to get my error message to display if my product's status is not approved or it's empty, but it isn't showing up and I'm not getting anything in my console, but in my network tab the error is showing up.
Here is my code
<template>
<div>
<div class="row justify-content-center my-5">
<div class="col-md-6">
<div class="form">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" v-model="product.name">
</div>
</div>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" id="description" name="description" v-model="product.description">{{ product.description }}</textarea>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-success" #click="updateProduct()">Update Product</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['product'],
data() {
return {
}
},
methods: {
updateProduct(){
axios.put('/api/admin/products/'+this.product.id, {
'name': this.product.name,
'description': this.product.description
}).then(response => {
Swal.fire(
'Changes Saved',
'The product details have been updated',
'success'
)
}).catch(error => {
console.log(error);
Swal.fire(
'Oops!',
err.message,
'error'
)
})
}
},
mounted(){
}
}
</script>
My function
public function updateProduct(Product $product)
{
$outstanding = Product::where('status', 'pending')
->first();
if(!empty($outstanding->status) && $outstanding->status != 'Approved')
{
return [
'error' => "This product is not approved"
];
}
}

Answer 1

Add an error status code to it using response() function. Default status code is 200 which means successful in axios. You need to tell axios that it is an error and catch it. So, providing an error status code will do this for you. more info
if(!empty($outstanding->status) && $outstanding->status != 'Approved')
{
return response([
'error' => "This product is not approved"
], 400);
}
Additionally, you have a typo in your axios code. Change err to error
.catch(error => {
console.log(error);
Swal.fire(
'Oops!',
error.response.data.error,
'error'
)
})