15
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-06-23

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

001.png

親記事

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

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

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

:page_facing_up: 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
15
14
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?