⑧Vue.js & Laravel（検索機能の追加）

2023-02-212024-04-01

はじめに

こちらは10本の記事で構成されています

目標

検索機能を追加する

実装

①フロントエンドからAPIにリクエストする

<template>
    <div class="searchComponent">
+        <form @submit.prevent="taskSearch">
+            緊急：<input v-model="search.emergency" type="checkbox"><br>
+            内容：<input v-model="search.content" type="text">
+            <button>search</button>
+        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
+            search: {
+                content: "",
+                emergency: false,
+            },
        };
    },
    methods: {
+        taskSearch(){
+            axios.post("/api/task/search", this.search).then((res) => {
+            });
+        }
    },
};
</script>
<style lang="scss" scoped>
+ li{
+     list-style: none;
+     margin-bottom: 15px;
+ }
+ .red{
+     color: red;
+ }
</style>

これで「①フロントエンドからAPIにリクエストする」が達成されました

②APIからコントローラーにリクエストを送る

<?php

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

Route::post('/task/create', 'TaskController@create');
Route::get('/task/read', 'TaskController@read');
Route::put('/task/update', 'TaskController@update');
Route::delete('/task/delete/{id}', 'TaskController@delete');
+ Route::post('/task/search', 'TaskController@search');

これで「②APIからコントローラーにリクエストを送る」が達成されました

③コントローラーからデータベースにリクエストを送る

<?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;
    }
    public function update(Request $request)
    {
        Task::where("id", $request->id)->update([
            "emergency" => $request->emergency,
            "content" => $request->content,
        ]);
    }
    public function delete($id)
    {
        Task::where("id", $id)->delete();
    }
+    public function search(Request $request)
+    {
+        $query = Task::query()
+        ->orderBy('id', 'asc');
+
+        $query->where('emergency','=', $request->emergency);
+        if(isset($request->content)){
+            $query->where('content','like', "%".$request->content."%");
+        }
+
+        $data = $query->get();
+        return $data;
+    }
}

これで「③コントローラーからデータベースにリクエストを送る」が達成されました

④レスポンスを画面に表示させる

<template>
    <div class="searchComponent">
        <form @submit.prevent="taskSearch">
            緊急：<input v-model="search.emergency" type="checkbox"><br>
            内容：<input v-model="search.content" type="text">
            <button>search</button>
        </form>
+        <hr>
+        <ul>
+            <li v-for="(task, index) in tasks" :key="index">
+                緊急：<input type="checkbox" v-model="task.emergency" disabled='disabled'><br>
+                内容：<span :class="{red:task.emergency}">{{task.content}}</span>
+            </li>
+        </ul>
    </div>
</template>

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

これで「④レスポンスを画面に表示させる」が達成されました