Q&A
Laravel 8
今まで、オーソドックスなLaravelの使用しかしてきませんでしたが、案件で必要なため、
Laravel（API）×フロント側はVue（SPA）を勉強するためにサンプルプログラムを作りました。
作成したサンプルプログラム：Vue.js + LaravelでシンプルなSPA構築チュートリアル
※リンクは4本目（VueとAPI結合編）の記事です
サンプルプログラムは問題なく動くのですが、なぜこれで動くのか分からない部分がありまして、教えていただけると幸いです。
###サンプルプログラムコードと疑問点
サンプルプログラムは、タスクの、一覧表示、詳細ページ表示、登録、編集、削除 を行う基本的なものです。
以下コードです。
■ルート routes/api.php
<?php use Illuminate\Http\Request; use Illuminate\Support\Facades\Route; use App\Http\Controllers\TaskController; /* |-------------------------------------------------------------------------- | 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('/tasks', [TaskController::class, 'index']); //タスク登録 Route::post('/tasks', [TaskController::class, 'store']); //タスク詳細 Route::get('/tasks/{task}', [TaskController::class, 'show']); //タスク更新 Route::put('/tasks/{task}', [TaskController::class, 'update']); //タスク削除 Route::delete('/tasks/{task}', [TaskController::class, 'destroy']);
■コントローラー TaskController.php
<?php namespace App\Http\Controllers; use App\Models\Task; //追加した use Illuminate\Http\Request; class TaskController extends Controller { public function index() { return Task::all(); } public function store(Request $request) { return Task::create($request->all()); //リクエストで受け取ったjsonデータをそのままモデルのcreateでデータ登録 } public function show(Task $task) { return $task; //URLパラメータで受け取ったタスクモデルをそのままリターン } }
■vue側 一覧表示用コンポーネント TaskListComponent.vue
<template> <div class="container"> <table class="table table-hover"> <thead class="thead-light"> <tr> <th scope="col">#</th> <th scope="col">Title</th> <th scope="col">Content</th> <th scope="col">Person In Charge</th> <th scope="col">Show</th> <th scope="col">Edit</th> <th scope="col">Delete</th> </tr> </thead> <tbody> <tr v-for="task in tasks"> <th scope="row">{{ task.id }}</th> <td>{{ task.title }}</td> <td>{{ task.content }}</td> <td>{{ task.person_in_charge }}</td> <td> <router-link v-bind:to="{name: 'task.show', params: {taskId: task.id }}"> <button class="btn btn-primary">Show</button> </router-link> </td> <td> <router-link v-bind:to="{name: 'task.edit', params: {taskId: task.id }}"> <button class="btn btn-success">Edit</button> </router-link> </td> <td> <button class="btn btn-danger">Delete</button> </td> </tr> </tbody> </table> </div> </template> <script> export default { data: function () { return { tasks: [] //データが入る変数を初期化 } }, methods: { //タスク一覧取得APIにリクエストしてそのレスポンスをtasks[] の中に入れる getTasks() { axios.get('/api/tasks') .then((res) => { this.tasks = res.data; }); } }, mounted() { this.getTasks(); //画面描画時にこの getTasks() メソッドが実行されるように、mounted() でメソッドを呼び出す。 } } </script>
■vue側 詳細ページ用コンポーネント TaskShowComponent.vue
<template> <div class="container"> <div class="row justify-content-center"> <div class="col-sm-6"> <form> <div class="form-group row border-bottom"> <label for="id" class="col-sm-3 col-form-label">ID</label> <input type="text" class="col-sm-9 form-control-plaintext" readonly id="id" v-model="task.id"> </div> <div class="form-group row border-bottom"> <label for="title" class="col-sm-3 col-form-label">Title</label> <input type="text" class="col-sm-9 form-control-plaintext" readonly id="title" v-model="task.title"> </div> <div class="form-group row border-bottom"> <label for="content" class="col-sm-3 col-form-label">Content</label> <input type="text" class="col-sm-9 form-control-plaintext" readonly id="content" v-model="task.content"> </div> <div class="form-group row border-bottom"> <label for="person-in-charge" class="col-sm-3 col-form-label">Person In Charge</label> <input type="text" class="col-sm-9 form-control-plaintext" readonly id="person-in-charge" v-model="task.person_in_charge"> </div> </form> </div> </div> </div> </template> <script> export default { props: { taskId: String }, data: function () { return { task: {} } }, methods: { getTask() { axios.get('/api/tasks/' + this.taskId) .then((res) => { this.task = res.data; }); } }, mounted() { this.getTask(); } } </script>
★疑問点：
「タスクの詳細ページ表示（show）」の流れがわかりません。
一覧表示用コンポーネント TaskListComponent.vueで、
<router-link v-bind:to="{name: 'task.show', params: {taskId: task.id }}"> <button class="btn btn-primary">Show</button> </router-link>
というように、taskのidをパラメータにして渡しています。
しかし、Controllerでは、
public function show(Task $task) { return $task; //URLパラメータで受け取ったタスクモデルをそのままリターン }
となっています。
今まで、私が書いていた方法だと、idを受け取って、
$task = Task::find($id)して、return $task のように、
idでfindする処理をいれていましたが、今回はそのようにしていません。
それなのになぜうまく行くのかがわかりません。。
ご教示いただけますと幸いです。
【追記】
回答の一部になるかもしれませんが、、、
詳細ページ用コンポーネント TaskShowComponent.vueのscript内、
methods: { getTask() { axios.get('/api/tasks/' + this.taskId) .then((res) => { this.task = res.data; }); } },
のthisとは何なのでしょうか・・・
回答1件
0
ベストアンサー
それなのになぜうまく行くのかがわかりません。。
暗黙の結合が使われています。Laravelが裏で $task = Task::find($id) のようなことをやってくれています。
（追記）
thisとは何なのでしょうか・・・
Vueコンポーネント内では、そのVueコンポーネント自身を指しています。
投稿2021/02/14 07:17
編集2021/02/14 07:21
総合スコア1899
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/14 07:38
2021/02/14 07:39