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

<template>
    <div class="taskComponent">
        タスク画面
    </div>
</template>

<script>
export default {
    data() {
        return {
+            tasks:[],
        };
    },
    methods: {
+        taskRead() {
+            axios.get("/api/task/read").then((res) => {
+                this.tasks = res.data;
+            });
+        },
    },
    mounted() {
+        this.taskRead();
    },
};
</script>
<style lang="scss" scoped>

</style>

<?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:api')->get('/user', function (Request $request) {
-     return $request->user();
- });

+ Route::get('/task/read', 'TaskController@read');

<?php

namespace App\Http\Controllers;

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

class TaskController extends Controller
{
+    public function read()
+    {
+        $data = Task::get();
+        return $data;
+    }
}

<template>
    <div class="taskComponent">
-        タスク画面
+        <ul>
+            <li v-for="(task, index) in tasks" :key="index">
+                緊急：<input type="checkbox" v-model="task.emergency"><br>
+                内容：<span :class="{red:task.emergency}">{{task.content}}</span>
+            </li>
+        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
           tasks:[],
        };
    },
    methods: {
       taskRead() {
           axios.get("/api/task/read").then((res) => {
               this.tasks = res.data;
           });
       },
    },
    mounted() {
       this.taskRead();
    },
};
</script>
<style lang="scss" scoped>
+ li{
+     list-style: none;
+     margin-bottom: 15px;
+ }
+ .red{
+     color: red;
+ }
</style>