④Vue.js & Laravel（Create…データベースにデータを保存）

<template>
    <div class="taskComponent">
+        <form @submit.prevent="taskCreate">
+            緊急：<input v-model="newtask.emergency" type="checkbox"><br>
+            内容：<input v-model="newtask.content" type="text">
+            <button>create</button>
+        </form>
+        <hr>
        <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 {
+            newtask: {
+                content: "",
+                emergency: false,
+            },
            tasks:[],
        };
    },
    methods: {
+        taskCreate() {
+            if (this.newtask.content != "") {
+                axios.post("/api/task/create", this.newtask).then((res) => {
+                    this.newtask.emergency = false;
+                    this.newtask.content = "";
+                    this.taskRead();
+                });
+            }
+        },
        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>

<?php

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

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

<?php

namespace App\Http\Controllers;

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

class TaskController extends Controller
{
+    public function create(Request $request)
+    {
+        Task::create([
+            'emergency' => $request->emergency,
+            'content' => $request->content,
+        ]);
+    }
    public function read()
    {
        $data = Task::get();
        return $data;
    }
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
+    protected $fillable = [
+        'emergency',
+        'content'
+    ];
}