Textarea 更新未通過 vuejs $emit 事件持久化到數據庫，axios 和 laravel 后端 api

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 controller 的 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);

目前，textarea 沒有更新或持久化到數據庫。 我不知道我錯過了什么。 感謝您提供任何幫助，我嘗試實施我在網上找到的內容但沒有成功。

謝謝！

Answer 1

看起來您沒有將數據修補到服務器。 嘗試以下操作：

    async updateTask(taskData) {
       try {
        await this.$axios.patch(`projects/${taskData.project.id}/tasks/${taskData.id}`, taskData)
      } catch (err) {
        console.error(err)
      }
    }

$axios.patch的第二個參數應該是您要發送到服務器的數據。