stsnkmr
@stsnkmr (めいんくーん)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Laravel:Formファサードについて

解決したいこと

本の在庫管理システムを作成しています。

@foreach ($books as $book)
    ……
    <td style="width: 30%">
         <a href="{{ action('BookController@show', [$book]) }}">
             <button type="button" class="btn btn-primary">詳細</button>
         </a>
         <a href="{{ action('BookController@edit', [$book]) }}">
             <button type="button" class="btn btn-primary">編集</button>
         </a>
         <div style="display: inline-flex">
             {{ Form::open(['method' => 'delete', 'url' => action('BookController@destroy', [$book])]) }}
             {{ Form::submit('削除', ['class' => 'btn btn-danger']) }}
             {{ Form::close() }}
         </div>
    </td>
@endforeach

このように削除ボタンを用意しています。
簡単に説明すると、本のリストをforeachで表示していて、その行の右端にアクションボタンとして、削除ボタンを用意しています。
2行目以降は、正常に削除できるのですが、1行目の削除ボタンが機能しないです。

開発者ツールを見ると

//1行目
<input name="_method" type="hidden" value="DELETE">
<input name="_token" type="hidden" value="CLOKiLCPl2Ggr3IdbliPD14SLlXdBKgJzS33Hwoy">
<input class="btn btn-danger" type="submit" value="削除">

//2行目以降
<form method="POST" action="(url.....)/book/2" accept-charset="UTF-8">
    <input name="_method" type="hidden" value="DELETE">
    <input name="_token" type="hidden" value="CLOKiLCPl2Ggr3IdbliPD14SLlXdBKgJzS33Hwoy">
    <input class="btn btn-danger" type="submit" value="削除">
</form>

と、formタグで囲まれていないようです。
あと、1行目だけちょっと浮いてます。
2.png

他の部分でファサードを使って書いているので、ここでもファサードを使いたいのですが。
何か原因はわかる人はいますか?

[追記]
複数ボタンを増やすと

<div style="display: inline-flex">
{!! Form::open(['method' => 'DELETE', 'url' => action('BookController@destroy', [$book])]) !!}
{!! Form::submit('削除', ['class' => 'btn btn-danger']) !!}
{!! Form::close() !!}
{{ Form::open(['method' => 'DELETE', 'url' => action('BookController@destroy', [$book])]) }}
{{ Form::submit('削除', ['class' => 'btn btn-danger']) }}
{{ Form::close() }}
</div>

01.png

1行目の長いところは機能しないままですが、その右の削除ボタンは機能します。

0

1Answer

この現象、以前にStackOverflowでも見た記憶があります。
「bladeで@foreachでループした時に最初のフォームタグが正しくレンダリングされない」みたいな。
結局解決策は出てなかったと思います。

使えない以上、正しい出力内容を確認のうえ、
直書き&action先出力にした方が良いかもしれませんね。

2Like

Comments

  1. @stsnkmr

    Questioner

    @harmless_3d6
    ご貴重な意見ありがとうございました。
    そうだったんですね。
    一応、Formファサードで解決する方法を編み出したので記事にしようと思います。
    ありがとうございました!!!

Your answer might help someone💌