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

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)&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-lg-2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style="float:left; padding-right: 10px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="/form/{{$cuid}}/{{$form['cuBaseName']}}"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data-toggle="tooltip" title="Edit Fields"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ><i class="fas fa-edit fa-2x"></i></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style="float:left; padding-right: 10px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span data-toggle="modal" data-target="#copyFormModal-{{$cuid}}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" data-toggle="tooltip" title="Copy"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ><i class="fas fa-copy fa-2x"></i></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style="float:left; padding-right: 10px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span data-toggle="modal" data-target="#deleteFormModal-{{$cuid}}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" data-toggle="tooltip" title="Delete">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-trash-alt fa-2x"></i></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <hr>&nbsp; &nbsp; @include('layouts.partials.modals.copyFormModal',['cuid'=>$cuid, 'cuBaseName'=> $form['cuBaseName']])&nbsp; &nbsp; @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" >&nbsp; &nbsp; <div class="modal-dialog" role="document" style="max-width:900px;">&nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="modal-title" id="exampleModalLabel">Delete Form</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="close" data-dismiss="modal" aria-label="Close">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span aria-hidden="true">&times;</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Are you sure you want to delete form <b>{{$cuBaseName}}</b> from <b>{{$cuid}}</b>?&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-footer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-success" data-dismiss="modal"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onclick='location.href="/forms/{{$cuid}}/{{$cuBaseName}}/delete"' >Delete</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>希望能帮助到你。