③Vue.js & Laravel8 & Docker（Read…データベースからデータを取得）

<template>
  <v-card>
    <v-card-title>
      <span>タスク 一覧</span>
      <v-spacer></v-spacer>
      <v-btn router to="/main/task/create" height="35px" width="35px" fab>
        <v-icon color="primary">mdi-plus</v-icon>
      </v-btn>
    </v-card-title>
    <v-card-text class="pa-0">
      <div class="task_list">
        <v-divider></v-divider>
        <v-simple-table>
          <thead>
            <tr>
              <th>ID</th>
              <th>タスク名</th>
            </tr>
          </thead>
          <tbody>
            <tr @click="$router.push(`/main/task/read?taskId=${task.task_id}`)" v-ripple v-for="(task,index) in tasks" :key="index">
              <td>{{task.task_id}}</td>
              <td>{{task.task_name}}</td>
            </tr>
          </tbody>
        </v-simple-table>
      </div>
    </v-card-text>
  </v-card>
</template>

<script>
+ import axios from "axios";
export default {
  data() {
    return {
      tasks: [
        {
          task_id: 1,
          task_name: "1番目のタスク（dummy）",
        },
        {
          task_id: 2,
          task_name: "2番目のタスク（dummy）",
        },
        {
          task_id: 3,
          task_name: "3番目のタスク（dummy）",
        },
      ],
    };
  },
  methods: {
+    getTasks() {
+      const requestConfig = {
+        url: "http://localhost:8001/api/tasks",
+        method: "GET",
+      };
+      axios(requestConfig)
+        .catch(() => {
+          alert("エラー");
+        });
+    },
  },
  mounted() {
+    this.getTasks();
  },
};
</script>

<?php

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

- /*
- |--------------------------------------------------------------------------
- | API Routes
- |--------------------------------------------------------------------------
- |
- | Here is where you can register API routes for your application. These
- | routes are loaded by the RouteServiceProvider within a group which
- | is assigned the "api" middleware group. Enjoy building your API!
- |
- */
- 
- Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
-     return $request->user();
- });

+ Route::get('/tasks', 'App\Http\Controllers\TaskController@getTasks');

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

<template>
  <v-card>
    <v-card-title>
      <span>タスク 一覧</span>
      <v-spacer></v-spacer>
      <v-btn router to="/main/task/create" height="35px" width="35px" fab>
        <v-icon color="primary">mdi-plus</v-icon>
      </v-btn>
    </v-card-title>
    <v-card-text class="pa-0">
      <div class="task_list">
        <v-divider></v-divider>
        <v-simple-table>
          <thead>
            <tr>
              <th>ID</th>
              <th>タスク名</th>
            </tr>
          </thead>
          <tbody>
            <tr @click="$router.push(`/main/task/read?taskId=${task.task_id}`)" v-ripple v-for="(task,index) in tasks" :key="index">
              <td>{{task.task_id}}</td>
              <td>{{task.task_name}}</td>
            </tr>
          </tbody>
        </v-simple-table>
      </div>
    </v-card-text>
  </v-card>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tasks: [
-        {
-          task_id: 1,
-          task_name: "1番目のタスク（dummy）",
-        },
-        {
-          task_id: 2,
-          task_name: "2番目のタスク（dummy）",
-        },
-        {
-          task_id: 3,
-          task_name: "3番目のタスク（dummy）",
-        },
      ],
    };
  },
  methods: {
    getTasks() {
      const requestConfig = {
        url: "http://localhost:8001/api/tasks",
        method: "GET",
      };
      axios(requestConfig)
+        .then((res) => {
+          this.tasks = res.data;
+        })
        .catch(() => {
          alert("エラー");
        });
    },
  },
  mounted() {
    this.getTasks();
  },
};
</script>