⑤Vue.js & Laravel8 & Docker（Read…データベースからデータを1件のみ取得）

<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" label="タスク名" dense outlined color="primary" readonly></v-text-field>
          </li>
          <li class="mb-3">
            <v-textarea :value="task.task_detail" label="詳細" dense outlined color="primary" readonly></v-textarea>
          </li>
        </ul>
      </section>
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn @click="$router.push(`/main/task/update?taskId=${task.task_id}`)" class="orange white--text">
        <span>編集</span>
        <v-icon>mdi-pencil</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）",
      },
    };
  },
  methods: {
+    getTask() {
+      const requestConfig = {
+        url: "http://localhost:8001/api/task",
+        method: "GET",
+        params: {
+          id: this.$route.query.taskId,
+        },
+      };
+      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::post('/task', 'App\Http\Controllers\TaskController@postTask');
+ Route::get('/task', 'App\Http\Controllers\TaskController@getTask');

<?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;
+    }
}

<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" label="タスク名" dense outlined color="primary" readonly></v-text-field>
          </li>
          <li class="mb-3">
            <v-textarea :value="task.task_detail" label="詳細" dense outlined color="primary" readonly></v-textarea>
          </li>
        </ul>
      </section>
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn @click="$router.push(`/main/task/update?taskId=${task.task_id}`)" class="orange white--text">
        <span>編集</span>
        <v-icon>mdi-pencil</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: "",
      },
    };
  },
  methods: {
    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("エラー");
        });
    },
  },
  mounted() {
    this.getTask();
  },
};
</script>