我对 vuejs 非常陌生,正在致力于实现一个可以在任务创建后更新的待办事项列表。我在包含要更新的文本区域的表中的每一行都有一个子组件,该子组件向父待办事项列表组件发出一个事件,该事件使用 axios 调用更新方法。我试图更新的字段是“描述”。
子组件代码:
<textarea v-model="task.description" @blur="$emit('update', task)" />
<script>
export default {
props: {
task: {
type: Object,
required: true
}
父组件代码:
<ChildComponent
v-for="task in tasks"
:key="task.id"
:task="task"
:project="project"
@delete="deleteTask"
@update="updateTask"
/>
.
.
.
methods: {
async updateTask(taskData) {
try {
await this.$axios.patch(`projects/${taskData.project.id}/tasks/${taskData.id}`)
} catch (err) {
console.error(err)
}
}
使用 vue devtools chrome 扩展,事件选项卡显示:
name:"update"
type:"$emit"
source:"<ChildComponent>"
payload:Array[1]
0:Object
created_at:"2020-07-07 14:01:46"
created_by:1
description:"Updated Task Description"
id:43
project:Object
project_id:1
updated_at:"2020-07-07 14:01:46"
但是,以下是我的 api 控制器的 JSON 响应:
{"data":{
"id":43,
"created_by":1,
"project_id":1,
"description":"Original Description",
"created_at":"2020-07-07 14:01:46",
"updated_at":"2020-07-07 14:01:46"}
}
和任务控制器:
$task->update($request->all());
return response()->json([
'data' => $task,
], 202);
目前,文本区域没有更新或保存到数据库中。我不知道我错过了什么。感谢任何帮助,我尝试实施我在网上找到的内容但没有成功。
函数式编程