Laravel：如何在Bootstrap模态框中显示对应地址的动态数据？

问题根源 #

你当前的代码在循环里给所有模态框设置了相同的id="edit-delivery-address-modal"，而HTML中id必须唯一，所以所有Edit按钮都会触发第一个渲染出来的模态框，自然只能看到第一条地址的数据。

无需JS/Ajax的解决方案 #

直接在循环中为每个模态框生成唯一id，并让对应Edit按钮的data-bs-target指向这个id，同时在模态框内直接使用当前循环的$address变量填充数据，完全不需要额外的JS或Ajax。

修改后的完整代码：

@foreach ($addresses->sortByDesc('status') as $address)
    <div class="col-12 col-lg-8 col-xl-7 col-xxl-5 d-flex justify-content-between">
        <p style="visibility: {{ $address->status === 'default' ? 'visible' : 'hidden' }};">
            Default Delivery Address
        </p>
        <!-- 按钮的data-bs-target指向当前地址对应的模态框唯一id -->
        <button class="btn d-inline-flex" type="button"
                data-bs-target="#edit-delivery-address-modal-{{ $address->id }}" data-bs-toggle="modal">
            Edit
        </button>
        <!-- 用地址id生成唯一的模态框id -->
        <div class="modal fade" role="dialog" tabindex="-1" id="edit-delivery-address-modal-{{ $address->id }}">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Edit Delivery Address</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- 直接填充当前$address的字段 -->
                        <div class="mb-3">
                            <label class="form-label">姓名</label>
                            <input type="text" class="form-control" value="{{ $address->name }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">街道地址</label>
                            <input type="text" class="form-control" value="{{ $address->street }}">
                        </div>
                        <!-- 其他地址字段按需添加 -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">保存修改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

关键说明 #

• 每个模态框的id通过{{ $address->id }}拼接，确保唯一性；
• Edit按钮的data-bs-target与对应模态框的id完全匹配，点击时只会触发当前地址的模态框；
• 模态框内直接使用循环中的$address变量填充表单或展示内容，所有数据在页面渲染时就已绑定到对应模态框，无需额外异步请求。

内容的提问来源于stack exchange，提问作者Sequoia