使用 vue js 和 laravel 添加表数据时获取未定义的值
Posted
技术标签:
【中文标题】使用 vue js 和 laravel 添加表数据时获取未定义的值【英文标题】：Getting undefined values when adding a table data using vue js and laravel 【发布时间】：2016-09-22 14:40:40 【问题描述】：我有这个项目，当用户单击按钮时，数据应显示在表格上。但是，我使用的是http://i.stack.imgur.com/HW4rE.jpg 此处所示的表格。我想要的是，当用户单击注册表单表上的添加按钮时，它应该显示在添加的主题表上，而无需刷新页面。问题是我使用的是表格，无法使用 v-model 来绑定值。
这是我的 form.blade.php
报名表
<table class="table table-bordered">
<tr>
<th>Section</th>
<th>Subject Code</th>
<th>Descriptive Title</th>
<th>Schedule</th>
<th>No. of Units</th>
<th>Room</th>
<th>Action</th>
</tr>
<body>
<input type="hidden" name="student_id" value=" $student_id ">
@foreach($subjects as $subject)
@foreach($subject->sections as $section)
<tr>
<td> $section->section_code </td>
<td> $subject->subject_code </td>
<td> $subject->subject_description </td>
<td> $section->pivot->schedule </td>
<td> $subject->units </td>
<td> $section->pivot->room_no </td>
<td>
<button
v-on:click="addSubject( $section->pivot->id, $student_id )"
class="btn btn-xs btn-primary">Add
</button>
<button class="btn btn-xs btn-info">Edit</button>
</td>
</tr>
@endforeach
@endforeach
</body>
</table>
已添加主题表
<table class="table table-bordered">
<tr>
<th>Section Code</th>
<th>Subject Code</th>
<th>Descriptive Title</th>
<th>Schedule</th>
<th>No. of Units</th>
<th>Room</th>
<th>Action</th>
</tr>
<body>
<tr v-for="reservation in reservations">
<td>@ reservation.section.section_code </td>
<td>@ reservation.subject.subject_code </td>
<td>@ reservation.subject.subject_description </td>
<td>@ reservation.schedule </td>
<td>@ reservation.subject.units </td>
<td>@ reservation.room_no </td>
<td>
<button class="btn btn-xs btn-danger">Delete</button>
</td>
</tr>
</body>
</table>
这是我的 all.js
new Vue(
el: '#app-layout',
data:
reservations: []
,
ready: function()
this.fetchSubjects();
,
methods:
fetchSubjects: function()
this.$http(
url: 'http://localhost:8000/reservation',
method: 'GET'
).then(function (reservations)
this.$set('reservations', reservations.data);
console.log('success');
, function (response)
console.log('failed');
);
,
addSubject: function(section,subject,student_id)
var self = this;
this.$http(
url: 'http://localhost:8000/reservation',
data: sectionSubjectId: section.pivot.id, studentId: student_id ,
method: 'POST'
).then(function(response)
self.$set('reservations', response.data);
console.log(response);
self.reservations.push(response.data);
,function (response)
console.log('failed');
);
);
这是我的 ReservationController
class ReservationController extends Controller
public function index()
$student = Student::with(['sectionSubjects','sectionSubjects.section', 'sectionSubjects.subject'])->find(1);
return $student->sectionSubjects;
public function create($id)
$student_id = $id;
$subjects = Subject::with('sections')->get();
return view('reservation.form',compact('subjects','student_id'));
public function store(Request $request)
$subject = SectionSubject::findOrFail($request->sectionSubjectId);
$student = Student::with(['sectionSubjects','sectionSubjects.section', 'sectionSubjects.subject'])->findOrFail($request->studentId);
$subject->assignStudents($student);
return $student->sectionSubjects;
任何人都可以建议我如何解决这个问题，而无需刷新页面。
顺便说一句，我的 console.log 中有这个错误
Error when evaluating expression "reservation.section.section_code": TypeError: Cannot read property 'section_code' of undefined
Error when evaluating expression "reservation.subject.subject_code": TypeError: Cannot read property 'subject_code' of undefined
Error when evaluating expression "reservation.subject.subject_description": TypeError: Cannot read property 'subject_description' of undefined
Error when evaluating expression "reservation.subject.units": TypeError: Cannot read property 'units' of undefined
【问题讨论】：
请附上实际的错误信息及其发生的位置。 @LinusBorg 请查看更新的代码。谢谢。 @Linus Borg 我更新了代码。 【参考方案1】：您应该使用 vue-devtools 来检查从服务器获取 reservations 中的实际数据。
因为错误消息仅表示此数组中的对象没有.subject 属性，这意味着您收到的数据可能不具有您假设的结构，这就是您的解决方案所在找到了。
我不太了解 PHP 或 Laravel，但您的 GET 请求似乎从 index 方法中获取响应，并且此方法似乎回复的是主题数组，而不是保留数组（应该包含主题，根据您的模板代码）
【讨论】：
好的，我使用了 vue-devtools，得到了这个结果。 imgur.com/FUxWd2f 事实证明，将 response.data 推送到保留时，格式是数组。正如您在链接中看到的， 2:Array 不是对象。我现在该如何解决这个问题？以上是关于使用 vue js 和 laravel 添加表数据时获取未定义的值的主要内容，如果未能解决你的问题，请参考以下文章
使用 vue js 时在 laravel 中为 foreach 提供的参数无效
根据Laravel Vue Js Api中的关系从多个表中删除数据
使用 laravel 和 vue js 从 mysql 数据库中检查带有逗号分隔值的复选框
在 Laravel 5.1 和 Vue JS 中保存多个数据动态表单