PUT request won't get ID of the record in Vue.js with Laravel

Question

I'm trying to make a CRUD project using Vue.js in Laravel, and I'm successfully in the last step, editing. But I'm stuck in it.
I'm trying to use the same form to edit that I've use for creating also. One form, two tasks.
The only error I get is PUT http://localhost:8000/api/student/undefined 404 (Not Found), yeah I can't pass the ID (or model?) to Axios.

I think my routes, controllers in Laravel side are alright, but I can't pass the current ID of the edited record to Axios. Also, I don't have any ID input on the form. That might be the cause.

My Vue code to edit

addStudent(student, id) {
                if(this.edit === false){
                    axios.post(`api/students/create`, {
                    first_name:this.first_name,
                    last_name:this.last_name,
                    student_number:this.student_number,
                    phone_number:this.phone_number,
                    email:this.email,
                    birth_date:this.birth_date,
                    school_name:this.school_name,
                    });
                } else {
                    axios.put(`api/student/`+this.id, {
                        first_name:this.first_name,
                        last_name:this.last_name,
                        student_number:this.student_number,
                        phone_number:this.phone_number,
                        email:this.email,
                        birth_date:this.birth_date,
                        school_name:this.school_name,
                    });
                }
            },

My route (in api.php)

Route::put('student/{id}', 'StudentController@update');

My Controller

public function update(Request $request, $id)
    {
        $student = Student::findOrFail($id);

        $student->first_name = $request->get('first_name');
        $student->last_name = $request->get('last_name');
        $student->student_number = $request->get('student_number');
        $student->phone_number = $request->get('phone_number');
        $student->first_name = $request->get('email');
        $student->email = $request->get('first_name');
        $student->birth_date = $request->get('birth_date');
        $student->school_name = $request->get('school_name');

        $student->save;

        return redirect('/');

Form action

<form @submit.prevent="addStudent()">

I need to finish this, I need any help that I can get. Thank you

student/undefined error this make sure this.id not undefined — Kamlesh Paul
student/undefined mean there no variable for id. Can you show the code for edit? — starplateena

N69S N69S · Accepted Answer · 2020-09-10T10:17:51

Javascript doesnt understand PUT request, it send it as a put request but without a body (you can only use it like a get method structure). To counter this issue, you need to send it as a POST request with a field _method = put for laravel to consider it as a put call

addStudent(student) {
                if(this.edit === false){
                    axios.post(`api/students/create`, {
                    first_name:this.first_name,
                    last_name:this.last_name,
                    student_number:this.student_number,
                    phone_number:this.phone_number,
                    email:this.email,
                    birth_date:this.birth_date,
                    school_name:this.school_name,
                    });
                } else {
                    axios.post(`api/student/`+this.id, {
                        _method:'PUT',
                        first_name:this.first_name,
                        last_name:this.last_name,
                        student_number:this.student_number,
                        phone_number:this.phone_number,
                        email:this.email,
                        birth_date:this.birth_date,
                        school_name:this.school_name,
                    });
                }
            },

PUT request won't get ID of the record in Vue.js with Laravel

2 Answers