Error: Request failed with status code 500 Laravel/Vue

Question

This is the full error message in the console :

POST http://127.0.0.1:8000/formSubmit 500 (Internal Server Error)
dispatchXhrRequest @ app.js:279
xhrAdapter @ app.js:118
dispatchRequest @ app.js:726
Promise.then (async)
request @ app.js:528
Axios.<computed> @ app.js:553
wrap @ app.js:1071
formSubmit @ app.js:1896
invokeWithErrorHandling @ app.js:25465
invoker @ app.js:25790
original._wrapper @ app.js:31143

I'm trying to get data from a VueJs form and insert them into a MySql database through a laravel controller

My VueJs submit method:

        methods: {
            formSubmit(e) {
                e.preventDefault();
                let currentObj = this;
                axios.post('/formSubmit', {
                    first: this.first,
                    last: this.last,
                    phone: this.phone,
                })
                .then(function (response) {
                    currentObj.output = response.data;
                })
                .catch(function (error) {
                    currentObj.output = error;
                });
            }

My controller:

class StudentsController extends Controller
{
    public function formSubmit(Request $request)
    {
        $validatedData = $request->validate([
            'first' => 'required|string',
            'last' => 'required|string',
            'phone' => 'required',
        ]);

        $s = new Student();
        $s->first = $validatedData->first;
        $s->last = $validatedData->last;
        $s->phone = $validatedData->phone;
        $s->save();

        return response()->json($validatedData);
    }
}

It's just a demo project so if there's other ways to submit without getting this error that'll work too.

Thanks

Answer 1

500 server error means the problem lies in your laravel controller. So check every field name of the table. check if there any column name first in your table. if it exists check what are you getting from your front-end? check are you getting valid data so at the beginning of the controller check by it.

return $request->first

if it's also right then try saving data directly from the request

$this->validate($request,[
            'first' => 'required|string',
            'last' => 'required|string',
            'phone' => 'required',
        ]);

        $s = new Student();
        $s->first = $request->first;
        $s->last = $request->last;
        $s->phone = $request->phone;
        $s->save();

        return response()->json(['result'=>$s]);