Laravel5.7: 削除確認をBootstrapのModalで行う

5046 ワード
laravel5.7 laravel5.7 テキストリンク

記事やユーザーの削除ボタンを押したら、いきなり削除せずにモーダルウィンドウで確認できるようにします。

親記事

Laravel 5.7で基本的なCRUDを作る - Qiita

モーダル用のコンポーネントを作る

以前の記事で作ったbtn-del.blade.phpを、丸ごと下記の内容に修正します。
Bootstrap4のモーダルを利用しています。

resources/views/components/btn-del.blade.php

1ページの中で複数の削除ボタンを表示する場合があるので、id属性がユニークになるようにmodal-delete-<コントローラ名>-<id番号>のように記述します。
最終確認の削除ボタンを<form>で囲って、削除用のアクションメソッドへ送信するようにしています。

コンポーネントを呼び出す

以前の記事で作ったコンポーネントとはスロットの数も内容も異なるので、下記のように修正してください。
これで完成形です。

resources/views/posts/show.blade.php
        @component('components.btn-del')
            @slot('controller', 'posts')
            @slot('id', $post->id)
            @slot('name', $post->title)
        @endcomponent
resources/views/users/show.blade.php
        @component('components.btn-del')
            @slot('controller', 'users')
            @slot('id', $user->id)
            @slot('name', $user->title)
        @endcomponent

(中略)

                            @component('components.btn-del')
                                @slot('controller', 'posts')
                                @slot('id', $post->id)
                                @slot('name', $post->title)
                            @endcomponent