⑥Vue.js & Laravel8 & Docker（Update…データベースを更新）

<template>
  <v-card>
    <v-card-title>編集（{{task.task_name}} ID:{{task.task_id}}）</v-card-title>
    <v-card-text class="px-4">
      <v-card-subtitle>タスク情報</v-card-subtitle>
      <section>
        <ul>
          <li class="mb-3">
            <v-text-field :value="task.task_name" @input="onUpdateName" label="タスク名" dense outlined color="primary"></v-text-field>
          </li>
          <li class="mb-3">
            <v-textarea :value="task.task_detail" @input="onUpdateDetail" label="詳細" dense outlined color="primary"></v-textarea>
          </li>
        </ul>
      </section>
    </v-card-text>
    <v-card-actions>
      <v-btn color="error">
        <span>削除</span>
        <v-icon>mdi-delete</v-icon>
      </v-btn>
      <v-spacer></v-spacer>
-      <v-btn color="primary">
+      <v-btn @click="updateTask()" color="primary">
        <span>登録</span>
        <v-icon>mdi-send</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      task: {
        task_id: 1,
        task_name: "1番目のタスク（dummy）",
        task_detail:
          "1番目のタスクの詳細（dummy）1番目のタスクの詳細（dummy）1番目のタスクの詳細（dummy）1番目のタスクの詳細（dummy）1番目のタスクの詳細（dummy）1番目のタスクの詳細（dummy）",
      },
      newTaskName: "",
    };
  },
  methods: {
    onUpdateName(taskName) {
      this.task.task_name = taskName;
    },
    onUpdateDetail(taskDetail) {
      this.task.task_detail = taskDetail;
    },
    getTask() {
      const requestConfig = {
        url: "http://localhost:8001/api/task",
        method: "GET",
        params: {
          id: this.$route.query.taskId,
        },
      };
      axios(requestConfig)
        .then((res) => {
          this.task = res.data;
        })
        .catch(() => {
          alert("エラー");
        });
    },
+    updateTask() {
+      const requestConfig = {
+        url: "http://localhost:8001/api/task",
+        method: "PUT",
+        data: {
+          id: this.task.task_id,
+          name: this.task.task_name,
+          detail: this.task.task_detail,
+        },
+      };
+      axios(requestConfig)
+        .catch(() => {
+          alert("エラー");
+        });
+    },
  },
  mounted() {
    this.getTask();
  },
};
</script>

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::get('/tasks', 'App\Http\Controllers\TaskController@getTasks');
Route::get('/task', 'App\Http\Controllers\TaskController@getTask');
Route::post('/task', 'App\Http\Controllers\TaskController@postTask');
+ Route::put('/task', 'App\Http\Controllers\TaskController@putTask');

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Task;

class TaskController extends Controller
{
    public function getTasks()
    {
        $data = Task::get();
        return $data;
    }
    public function postTask(Request $request)
    {
        return Task::create([
            'task_name' => $request['name'],
            'task_detail' => $request['detail'],
        ]);
    }
    public function getTask(Request $request)
    {
        $task = Task::where('task_id', $request['id'])->first();
        if (!$task) return response()->json(['errorMessage' => 'このデータは存在しません'], 404);
        return $task;
    }
+    public function putTask(Request $request)
+    {
+        return Task::where('task_id', $request['id'])->update([
+            'task_name' => $request['name'],
+            'task_detail' => $request['detail'],
+        ]);
+    }
}

<template>
  <v-card>
    <v-card-title>編集（{{task.task_name}} ID:{{task.task_id}}）</v-card-title>
    <v-card-text class="px-4">
      <v-card-subtitle>タスク情報</v-card-subtitle>
      <section>
        <ul>
          <li class="mb-3">
            <v-text-field :value="task.task_name" @input="onUpdateName" label="タスク名" dense outlined color="primary"></v-text-field>
          </li>
          <li class="mb-3">
            <v-textarea :value="task.task_detail" @input="onUpdateDetail" label="詳細" dense outlined color="primary"></v-textarea>
          </li>
        </ul>
      </section>
    </v-card-text>
    <v-card-actions>
      <v-btn color="error">
        <span>削除</span>
        <v-icon>mdi-delete</v-icon>
      </v-btn>
      <v-spacer></v-spacer>
      <v-btn @click="updateTask()" color="primary">
        <span>登録</span>
        <v-icon>mdi-send</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      task: {
-        task_id: 1,
-        task_name: "1番目のタスク（dummy）",
-        task_detail:
-          "1番目のタスクの詳細（dummy）1番目のタスクの詳細（dummy）1番目のタスクの詳細（dummy）1番目のタスクの詳細（dummy）1番目のタスクの詳細（dummy）1番目のタスクの詳細（dummy）",
+        task_id: 0,
+        task_name: "",
+        task_detail: "",
      },
      newTaskName: "",
    };
  },
  methods: {
    onUpdateName(taskName) {
      this.task.task_name = taskName;
    },
    onUpdateDetail(taskDetail) {
      this.task.task_detail = taskDetail;
    },
    getTask() {
      const requestConfig = {
        url: "http://localhost:8001/api/task",
        method: "GET",
        params: {
          id: this.$route.query.taskId,
        },
      };
      axios(requestConfig)
        .then((res) => {
          this.task = res.data;
        })
        .catch(() => {
          alert("エラー");
        });
    },
    updateTask() {
      const requestConfig = {
        url: "http://localhost:8001/api/task",
        method: "PUT",
        data: {
          id: this.task.task_id,
          name: this.task.task_name,
          detail: this.task.task_detail,
        },
      };
      axios(requestConfig)
+        .then(() => {
+          this.$router.push("/main/task");
+        })
        .catch(() => {
          alert("エラー");
        });
    },
  },
  mounted() {
    this.getTask();
  },
};
</script>