传递数据时在循环中创建多个模态

Question

我试图在循环项目和显示按钮时进行显示。这些按钮可以打开显示一些数据的模态。我尝试将数据传递给模态，但它只是显示循环信息的第一次迭代，并且从未更新。我需要做什么才能为列表的每次迭代创建模态？@foreach ($forms as $form)    <div class="row">        <div class="col-lg-2">            <div style="float:left; padding-right: 10px;">                <a href="/form/{{$cuid}}/{{$form['cuBaseName']}}"                   data-toggle="tooltip" title="Edit Fields"                ><i class="fas fa-edit fa-2x"></i></a>            </div>            <div style="float:left; padding-right: 10px;">                <span data-toggle="modal" data-target="#copyFormModal">                    <a href="#" data-toggle="tooltip" title="Copy"                    ><i class="fas fa-copy fa-2x"></i></a>                </span>            </div>            <div style="float:left; padding-right: 10px;">                <span data-toggle="modal" data-target="#deleteFormModal">                <a href="#" data-toggle="tooltip" title="Delete">                    <i class="fas fa-trash-alt fa-2x"></i></a>                </span>            </div>        </div>    </div>    <hr>    @include('layouts.partials.modals.copyFormModal',['cuid'=>$cuid, 'cuBaseName'=> $form['cuBaseName']])    @include('layouts.partials.modals.deleteFormModal',['cuid'=>$cuid, 'cuBaseName'=> $form['cuBaseName']])@endforeach

Answer 1

试试这个，#id为每个modal窗口添加一个唯一的：

@foreach ($forms as $form)

    <div class="row">

        <div class="col-lg-2">

            <div style="float:left; padding-right: 10px;">

                <a href="/form/{{$cuid}}/{{$form['cuBaseName']}}"

                   data-toggle="tooltip" title="Edit Fields"

                ><i class="fas fa-edit fa-2x"></i></a>

            </div>

            <div style="float:left; padding-right: 10px;">

                <span data-toggle="modal" data-target="#copyFormModal-{{$cuid}}">

                    <a href="#" data-toggle="tooltip" title="Copy"

                    ><i class="fas fa-copy fa-2x"></i></a>

                </span>

            </div>

            <div style="float:left; padding-right: 10px;">

                <span data-toggle="modal" data-target="#deleteFormModal-{{$cuid}}">

                <a href="#" data-toggle="tooltip" title="Delete">

                    <i class="fas fa-trash-alt fa-2x"></i></a>

                </span>

            </div>

        </div>

    </div>

    <hr>

    @include('layouts.partials.modals.copyFormModal',['cuid'=>$cuid, 'cuBaseName'=> $form['cuBaseName']])

    @include('layouts.partials.modals.deleteFormModal',['cuid'=>$cuid, 'cuBaseName'=> $form['cuBaseName']])

@endforeach

<!-- Modal example -->

<div class="modal fade" id="deleteFormModal-{{$cuid}}" tabindex="-1" role="dialog" aria-labelledby="deleteFormModal" aria-hidden="true" >

    <div class="modal-dialog" role="document" style="max-width:900px;">

        <div class="modal-content">

            <div class="modal-header">

                <h3 class="modal-title" id="exampleModalLabel">Delete Form</h3>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    <span aria-hidden="true">&times;</span>

                </button>

            </div>

            <div class="modal-body">

                Are you sure you want to delete form <b>{{$cuBaseName}}</b> from <b>{{$cuid}}</b>?

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                <button type="button" class="btn btn-success" data-dismiss="modal"

                        onclick='location.href="/forms/{{$cuid}}/{{$cuBaseName}}/delete"' >Delete</button>

            </div>

        </div>

    </div>

</div>

希望能帮助到你。