[英][Vue warn]: Error in render: “TypeError: Cannot read property 'id' of undefined”
I'm building my CRUD with Laravel & VueJS. 我正在使用Laravel和VueJS构建CRUD。 When I submit the creation form, I'm getting this message error : [Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined" 提交创建表单时,出现此错误消息:[Vue警告]:渲染错误:“ TypeError:无法读取未定义的属性'id'”
Here, my createUser method : 在这里,我的createUser方法:
export default {
data(){
return {
user: {
firstname: '',
lastname: '',
email: '',
password: ''
},
errors: [],
users: [],
update_user: {}
}
},
mounted(){
this.readUsers();
},
methods: {
createUser(){
axios.post('user', {
firstname: this.user.firstname,
lastname: this.user.lastname,
email: this.user.email,
password: this.user.password
}).then(response => {
this.reset();
if (response.data.message == "Error"){
this.errors.push("L'utilisateur que vous tentez d'ajouter existe déjà!")
}else{
this.users.push(response.data.user);
}
})
},
readUsers(){
axios.get('user')
.then(response => {
this.users = response.data.users;
});
},
}
}
And here, the table when I display all users from DB. 这里是我从数据库显示所有用户时的表格。 Display users works correctly. 显示用户正常工作。
<table class="table table-bordered table-striped table-responsive" v-if="users.length > 0">
<tbody>
<tr>
<th>#</th>
<th>Nom</th>
<th>Prénom</th>
<th>Adresse e-mail</th>
<th>Action</th>
</tr>
<tr v-for="(user, index) in users">
<td>{{ user.id }}</td>
<td>{{ user.lastname }}</td>
<td>{{ user.firstname }}</td>
<td>{{ user.email }}</td>
<td>
<button @click="initUpdate(index)" class="btn btn-success btn-xs">Éditer</button>
<button @click="deleteUser(index)" class="btn btn-danger btn-xs">Supprimer</button>
</td>
</tr>
</tbody>
</table>
My User model from Laravel here : 我的Laravel用户模型在这里:
namespace App;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;
class User extends Authenticatable
{
use Notifiable;
protected $fillable = [
'id',
'firstname',
'lastname',
'email',
'password'
];
protected $hidden = [
'password', 'remember_token',
];
}
And for the finish, my UserController method : 最后,我的UserController方法:
public function store(Request $request)
{
$this->validate($request, [
'firstname' => 'required',
'lastname' => 'required',
'email' => 'required',
'password' => 'required'
]);
$user = User::create([
'firstname' => request('firstname'),
'lastname' => request('lastname'),
'email' => request('email'),
'password' => Hash::make(request('password'))
]);
return response()->json([
'user' => $user,
'message' => 'Success'
], 200);
}
The create() method returns the model. create()方法返回模型。 So you need to transform user collection a bit, 因此,您需要对用户集合进行一些转换,
public function store(Request $request)
{
$this->validate($request, [
'firstname' => 'required',
'lastname' => 'required',
'email' => 'required',
'password' => 'required'
]);
$user = User::create([
'firstname' => request('firstname'),
'lastname' => request('lastname'),
'email' => request('email'),
'password' => Hash::make(request('password'))
]);
return response()->json([
'user' => [
'id'=>$user->id,
'firstname'=>$user->firstname,
'lastname'=>$user->lastname,
'email'=>$user->email
],
'message' => 'Success'
], 200);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.