I'm trying to show errors using axios in Vue js and data is coming from Laravel and I tried postman and it shows the errors but not showing using axios.I have implemented the code to save errors in a property called returned_errors inside the productState reactive object.This is my code,

const productState = reactive({
     product_name: "",
     product_cost: "",
     product_markup: "",
     markup_type: "Markup by price",
     product_selling: "",
     product_stock: "",
     returned_errors: [],
});

const addProduct = async () => {
    await axios
        .post("api/products", productState)
        .then((response) => {
            console.log(response)
        })
        .catch((error) => {
            productState.returned_errors = error.response.data.errors;
        });

    console.log(productState.returned_errors);
};

public function store(Request $request)
{
     $request->validate([
         'product_name' => 'required',
         'product_cost' => 'required | integer',
         'product_selling' => 'required | integer',
         'product_stock' => 'required | integer',
     ]);

     $product = new Product();
     $product->name = $request->product_name;
     $product->cost = $request->product_cost;
     $product->selling = $request->product_selling;
     $product->stock = $request->product_stock;
     $product->save();
 }

CodePudding user response：

Did you try with:

error.response.data.error

or just log error and see what is the structure

CodePudding user response：

The returned error in Axios not always has the error.response property. You probably should structure your error handling as in this example in the Axios docs.

Hope this helps.