我正在使用Vue执行POST请求以将新记录插入数据库。这是按预期工作的,下一个目标是将新创建的项目推送到现有数组并将其显示在表中。这是在Vue组件中完成的。
这是提交的表单:
<form @submit.prevent="createUser">
这是javascript部分:
export default {
data(){
return{
users: {},
form: new Form({
name: '',
email: '',
password: '',
type: '',
bio: '',
photo: '',
})
}
},
methods:{
displayUsers(){
axios.get('api/user').then( ({data}) => (this.users = data) )
},
createUser(){
this.form.post('api/user').then( ({ data }) =>
this.users.push(data.data)
);
}
},
created() {
this.displayUsers();
}
}
从createUser
方法,该条目将发布到数据库,并将创建的条目推送到现有用户数组。我的后端代码返回此数据,即
return response()->json(['data' => $request->all()], 200);
认为这足以让新条目自动显示在桌面上而不刷新,因为用户阵列已更新,但这种情况不会发生。
显示所有项目的表格如下所示:
<tr v-for="user in users" :key="user.id">
<td>{{ user.id }}</td>
....
那么我错过了什么?我的新创建的条目是否需要额外的步骤才能自动推送到我的桌子?
试试这个 -
在createUser方法中,当您分配新创建的用户时,请避免变异。
createUser(){
this.form.post('api/user').then( ({ data }) =>{
this.users = [ ...this.users, data.data ];
});
}
这有助于vue识别列表已更改,因为每次创建新用户时我们都会为用户分配一个全新的数组。
push方法修改相同的数组。扩展运算符有助于避免这种突变,因为我们正在复制新阵列中的所有用户以及新创建的用户。