Axios post fails with status code 500 in Laravel and Vue.js

Question

Hey guys I'm new to this and couldn't fix this myself. When I try to store some names in parent table in my database, I receive a 500 status code. Here is my Laravel code:

<?php

namespace App\Http\Controllers;

use http\Exception;
use Illuminate\Http\Request;
use app\Models\category;
use app\Models\parents;
class categorycontroller extends Controller
{
    .
    .
    .
    protected $parent = [];
    public function Mcategory(Request $request)
    {
       //throw new Exception();
       $parent=new parents();
       $parent->name=$request->name;
       $parent->save();
       return $parent;
    }
}

and here is my axios post method in Vue.js

const app = new Vue({
    el: '#app',
    data:{
        name:""
    },
    created:function(){

    },
    methods:{
        Mcategory:function(){
                axios.post('/admin/Mcategory',{
                    name:this.name
                    //name:"salam"
                }).then(response=>{
                    console.log(this.name);
                },response=>{
                    this.error=1;
                    console.log('error');
                });
        }
    }
});

Also, I couldn't find how to trace the error using .catch(...) ; any tips on how to trace the error and see it's cause would be appreciated.

Answer 1

bind your code in try catch block like this and see the network tab what you get in the response...then you can search for the error or give us a snippet so that we can help you

try {
                $parent=new parents();
           $parent->name=$request->name;
           $parent->save();
                return response()->json(['success' => $parent], 200);
            } catch (\Exception $e) {
                return response()->json(['error' => $e->getMessage()], 503);
            }