Textarea 更新未通过 vuejs $emit 事件、axios 和 laravel 后端

Question

我对 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);

目前，文本区域没有更新或保存到数据库中。我不知道我错过了什么。感谢任何帮助，我尝试实施我在网上找到的内容但没有成功。

Answer 1

看来您没有将数据修补到服务器。请尝试以下操作：&nbsp; &nbsp; async updateTask(taskData) {&nbsp; &nbsp; &nbsp; &nbsp;try {&nbsp; &nbsp; &nbsp; &nbsp; await this.$axios.patch(`projects/${taskData.project.id}/tasks/${taskData.id}`, taskData)&nbsp; &nbsp; &nbsp; } catch (err) {&nbsp; &nbsp; &nbsp; &nbsp; console.error(err)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }第二个参数$axios.patch应该是您要发送到服务器的数据。