Laravel 8使用Bootstrap Modal确认删除数据时总提交最后一行数据

问题原因 #

1. 弹窗内的删除表单是全局唯一的，渲染阶段你直接在表单action中写死了{{ route('admin.users.delete', $user) }}，此处的$user是表格循环到最后一行时的用户对象，因此表单初始提交地址永远指向最后一个用户的删除接口。
2. 你已经通过Bootstrap模态框的show.bs.modal事件获取到了触发按钮绑定的用户数据，但没有将数据同步更新到表单的提交地址上，等于拿到了数据没用到。
3. 表格循环代码中的删除按钮data-user="$user"写法错误，缺少Blade输出标记，实际输出到前端的是字符串$user，而非真实的用户数据。

修复步骤 #

1. 修正表格删除按钮的自定义属性，直接绑定用户ID即可：

<!-- 把原来的删除按钮替换成下面的代码 -->
<a href="#" class="deleteModal" data-toggle="modal" data-target="#deleteModal" data-user-id="{{ $user->id }}"><i class="fe fe-trash text-danger fe-24"></i></a>

2. 给弹窗内的删除表单添加ID，方便JS定位修改属性：

<form id="deleteUserForm" action="" method="post">
    @csrf
    <button type="submit" class="btn mb-2 btn-danger">Delete</button>
</form>

3. 修改JS代码，拿到触发按钮的用户ID后，动态更新表单的提交地址：

$('#deleteModal').on('show.bs.modal', function (event) {
  const button = $(event.relatedTarget)
  // 获取触发按钮绑定的用户ID
  const userId = button.data('user-id')
  // 拼接生成对应路径的删除接口地址
  const deleteRoute = "{{ route('admin.users.delete', ':userId') }}".replace(':userId', userId)
  // 给表单更新提交地址
  $('#deleteUserForm').attr('action', deleteRoute)
});

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