Q&A
エラー内容
Missing required parameters for [Route: posts.like] [URI: posts/{post}/like]. (View: C:\Users\tsgyu\Desktop\work\learning\laravelapp\resources\views\posts\index.blade.php)
実現したいこと
・URLにアクセス後すぐに上記のエラーがでてしまうのでこれを解決して一覧画面を表示させたい。
・axiosのputとdeleteのリクエストがどうやってLaravelに渡って内部でどういった動きをしているかが知りたい。
・エラーとなっている原因の目星をつけたい
index.blade.phpファイル
@extends('layouts.app') @section('content') <div class="container"> <div class="row justify-content-center"> <div class="col-md-10"> <div class="card text-center"> <div class="card-header"> 投稿一覧 </div> @foreach($posts as $post) <div class="card-body"> <h3 class="card-title">変化したこと：{{ $post->title }}</h3> <p class="card-text">変化の記録：{{ $post->body }}</p> <p class="card-text">投稿者：{{ $post->user->name }}</p> @if($post->image_path) <img src="{{ $post->image_path }}" alt="画像"> @endif<br> <a href="{{ route('posts.show', $post->id) }}" class="btn btn-primary mt-2 mb-3">詳細へ</a> <div class="row justify-content-center"> <div class="card-body pt-0 pb-2 pl-3"> <div class="card-text"> <post-likes :initial-is-liked-by='@json($post->isLikedBy(Auth::user()))' :initial-count-likes='@json($post->countlikes())' :authorized='@json(Auth::check())' endpoint="{{ route('posts.like', ['post' => $post->id]) }}" > </post-likes> </div> </div> </div> </div> <div class="card-footer"> 投稿日時：{{ $post->created_at }} </div> @endforeach </div> </div> <div class="col-md-2"> <a href="{{ route('posts.create') }}" class="btn btn-primary">新規投稿</a> </div> </div> </div> @endsection
web.phpファイル
<?php use Illuminate\Support\Facades\Route; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ //ログアウト後はここのパスが返される Route::get('/', function () { return view('auth.login'); }); Route::get('/posts/index','PostController@index')->name('posts.index')->middleware('auth'); Route::get('/posts/create','PostController@create')->name('posts.create'); Route::post('/posts/store','PostController@store')->name('posts.store'); Route::get('/posts/show/{id}','PostController@show')->name('posts.show'); Route::get('/posts/edit/{id}','PostController@edit')->name('posts.edit'); Route::post('/posts/update/{id}','PostController@update')->name('posts.update'); Route::post('/posts/destroy/{id}','PostController@destroy')->name('posts.destroy'); //==========ここが質問内容のルーティング========== Route::prefix('posts')->name('posts.')->group(function () { Route::put('/{post}/like', 'LikesController@like')->name('like')->middleware('auth'); Route::delete('/{post}/like', 'LikesController@unlike')->name('unlike')->middleware('auth'); }); //==========ここが質問内容のルーティング========== Route::post('comments/store','CommentController@store')->name('comments.store'); Route::post('/comment/edit/{id}','PostController@edit')->name('comment.edit'); Route::post('/comment/destroy/{id}','PostController@destroy')->name('comment.destroy'); Route::group([ 'prefix'=> 'rest' , 'middleware' => 'auth' ] , function(){ //認証されていた場合表示する //->nameを書いておくとroute()で指定された名前付きルートへのURLを生成できる。 Route::get('index','RestappController@index')->name('rest.index'); Route::get('create','RestappController@create')->name('rest.create'); Route::post('store','RestappController@store')->name('rest.store'); Route::get('edit/{id}','RestappController@edit')->name('rest.edit'); Route::post('update/{id}','RestappController@update')->name('rest.update'); Route::get('destroy/{id}','RestappController@destroy')->name('rest.destroy'); });
LikesControllerファイル
<?php namespace App\Http\Controllers; use Auth; use App\Post; use Illuminate\Http\Request; class ArticleController extends Controller { public function __construct() { $this->authorizeResource(Like::class, 'post'); } public function like(Request $request, Post $post) { //最初に削除をすることで二重にいいねすることを防ぐ。いいね状態で連続いいねしようとしても結果として1つしかいいねが登録されない $post->likes()->detach($request->user()->id);//likes()で多対多のリレーション(BelongsToManyクラスのインスタンス)が返る。 $post->likes()->attach($request->user()->id);//この投稿モデルと、リクエストを送信したユーザーのユーザーモデルの両者を紐づけるlikesテーブルのレコードが新規登録される。 return [ 'countLikes' => $post->countlikes(), ]; } public function unlike(Request $request, Post $post) { $post->likes()->detach($request->user()->id); return [ 'countLikes' => $post->countlikes(), ]; } }
PostLikes.vueファイル
<template> <div> <button type="button" class="btn m-0 p-1 shadow-none" > <i class="fas fa-heart mr-1" :class="{'red-text':this.isLikedBy}" @click="clickLike" /> </button> {{ countLikes }} </div> </template> <script> export default { props: { initialIsLikedBy: { type: Boolean, default: false, }, initialCountLikes: { type: Number, default: 0, }, authorized: { type: Boolean, default: false, }, endpoint: { type: String, }, }, data() { return { isLikedBy: this.initialIsLikedBy, countLikes: this.initialCountLikes, } }, methods: { clickLike() { if (!this.authorized) { alert('いいね機能はログイン中のみ使用できます') return } this.isLikedBy ? this.unlike() : this.like() }, async like() { const response = await axios.put(this.endpoint)//HTTPのPUTメソッドでリクエスト this.isLikedBy = true this.countLikes = response.data.countLikes()//response.dataにはlikeアクションメソッドの戻り値が代入されている }, async unlike() { const response = await axios.delete(this.endpoint)//axiosによるHTTP通信の結果を代入 this.isLikedBy = false this.countLikes = response.data.countLikes() }, }, } </script>
よろしくお願い致します。
あなたの回答
tips
プレビュー
