PUT 请求不会在 Vue 中获取记录的 ID.js与 Laravel

Question

我正试图在Laravel中使用Vue.js制作一个CRUD项目，我成功地完成了最后一步，即编辑。但我陷入了困境。
我正在尝试使用与创建时相同的表单进行编辑。一个表格，两个任务
我得到的唯一错误是PUThttp://localhost:8000/api/student/undefined404(未找到(，是的，我无法将ID(或型号？(传递给Axios。

我认为我的路线、Laravel侧的控制器都可以，但我无法将编辑记录的当前ID传递给Axios。另外，我没有在表单上输入任何ID。这可能是原因。

要编辑的我的Vue代码

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,
});
}
},

我的路线(在api.php中(

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

我的控制器

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 @submit.prevent="addStudent()">

我需要完成这件事，我需要任何我能得到的帮助。谢谢

Answer 1

Javascript不理解PUT请求，它将其作为一个PUT请求发送，但没有正文(您只能像使用get方法结构一样使用它(。为了解决这个问题，您需要将其作为POST请求发送，并为laravel提供一个字段_method = put，以将其视为看跌调用

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,
});
}
},

Answer 2

删除this并且id是本地可用的

axios.put(`api/student/`+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,
});

注意：如果您使用findOrFail()，则会出现404错误