单击按钮时调用模态

Question

在表格中显示从我的项目集合返回的每个项目的名称、评论和编辑按钮。单击编辑按钮时，应调用带有用于更新项目的表单的模式。

问题

如果从集合中返回多个项目，则只有最后一个项目的编辑按钮调用模式，但其他项目的编辑按钮不执行任何操作。我需要帮助来修复我的代码，以便无论集合中有多少项目，编辑按钮都会始终调用模式。

项目表列表

<div class="col-12 table-responsive">
<table class="table table-striped">
    <tbody>
        @foreach ($items as $item)
            <tr class="text-muted">
                <td class="text-capitalize">{{ $item->name }}</td>
                <td>{{ $item->comment }}</td>
                <td>
                    <button type="button" class="btn-custom-one" data-toggle="modal" data-target="#editItem{{$item->id}}"><i class="fas fa-edit"></i>&nbsp; Edit</button>&nbsp;
                </td>
            </tr>
        @endforeach
    </tbody>
</table>
</div>

模态

<div class="modal fade" id="editItem{{$item->id}}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <form action="/home/items/{{$item->id}}/update" method="POST">
                @method('PUT')
                @csrf
                <div class="form-group">
                    <label for="Name">Name</label>
                    <input type="text" name="name" value="{{$item->name}}" class="form-control">
                </div>

                <div class="form-group">
                    <label for="comment">Comment</label>
                    <textarea name="comment" class="form-control" cols="30" rows="5">{{$item->comment}}</textarea>
                </div>

                <button type="submit" class="btn btn-custom-two">Save</button>
            </form>
        </div>
    </div>
</div>
</div>

Answer 1

对您的代码稍作改动。想这样的事情。您必须在循环内调用模态。现在您可以通过在函数中定义此模式或进行硬编码来实现。我认为这会有所帮助

<div class="col-12 table-responsive">
<table class="table table-striped">
    <tbody>
        @foreach ($items as $item)
            <tr class="text-muted">
                <td class="text-capitalize">{{ $item->name }}</td>
                <td>{{ $item->comment }}</td>
                <td>
                    <button type="button" class="btn-custom-one" data-toggle="modal" data-target="#editItem{{$item->id}}"><i class="fas fa-edit"></i>&nbsp; Edit</button>&nbsp;
<div class="modal fade" id="editItem{{$item->id}}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <form action="/home/items/{{$item->id}}/update" method="POST">
                @method('PUT')
                @csrf
                <div class="form-group">
                    <label for="Name">Name</label>
                    <input type="text" name="name" value="{{$item->name}}" class="form-control">
                </div>

                <div class="form-group">
                    <label for="comment">Comment</label>
                    <textarea name="comment" class="form-control" cols="30" rows="5">{{$item->comment}}</textarea>
                </div>

                <button type="submit" class="btn btn-custom-two">Save</button>
            </form>
        </div>
    </div>
</div>
</div>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>
</div>