Laravel/Livewire删除弹窗总是删除首行数据问题求助

所有删除按钮绑定了同一个ID的模态框，或者循环生成了多个ID重复的模态框。由于DOM中ID必须唯一，浏览器只会识别第一个模态框，因此无论点击哪一行的删除按钮，模态框里调用deleteType时传入的始终是第一行的$type->id，导致每次都删除第一行数据。

方案一：为每行生成唯一模态框 #

给每个行对应的模态框和删除按钮分配带行ID的唯一标识，确保点击按钮时触发对应行的模态框，传入正确的ID。

修改后的循环+模态框代码：

@forelse ($allTypes as $type)
    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            {{ $type->id }}
        </th>
        <!-- 其他<th>标签 -->
        <td class="py-4 w-1/4">
            <button data-modal-target="popup-modal-{{ $type->id }}" data-modal-toggle="popup-modal-{{ $type->id }}" type="button">
                Delete
            </button>
        </td>
    </tr>

    <!-- 每行对应唯一的模态框 -->
    <div id="popup-modal-{{ $type->id }}" tabindex="-1" class="fixed top-0 left-0 right-0 z-50 hidden p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full flex justify-center items-center">
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <div class="p-6 text-center">
                <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">确定要删除ID为 {{ $type->id }} 的类型吗？</h3>
                <button wire:click="deleteType({{ $type->id }})" data-modal-hide="popup-modal-{{ $type->id }}" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
                    Yes, delete!
                </button>
                <button data-modal-hide="popup-modal-{{ $type->id }}" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
                    Cancel
                </button>
            </div>
        </div>
    </div>
@empty
    <tr>
        <td colspan="4" class="text-center py-4">暂无类型数据</td>
    </tr>
@endforelse

删除方法无需修改，保持你原来的代码即可。

方案二：使用单个模态框，先存储要删除的ID #

这种方式更高效，只保留一个模态框，点击删除按钮时先通过Livewire把当前行的ID存储到组件属性中，再触发模态框，删除时使用存储的ID。

步骤1：修改组件类 #

添加一个属性存储要删除的ID，并新增一个方法设置该ID：

public $deleteTypeId; // 新增属性，存储当前要删除的ID

// 新增方法，设置要删除的ID
public function setDeleteTypeId($id)
{
    $this->deleteTypeId = $id;
}

// 修改删除方法，不再接收参数，直接使用存储的ID
public function deleteType()
{
    $types = Types::findOrFail($this->deleteTypeId);
    $types->delete();
    $this->allTypes = $this->fetchTypes();
    $this->deleteTypeId = null; // 删除后清空ID
}

步骤2：修改Blade模板 #

循环部分的删除按钮改为调用setDeleteTypeId：

@forelse ($allTypes as $type)
    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            {{ $type->id }}
        </th>
        <!-- 其他<th>标签 -->
        <td class="py-4 w-1/4">
            <button wire:click="setDeleteTypeId({{ $type->id }})" data-modal-target="popup-modal" data-modal-toggle="popup-modal" type="button">
                Delete
            </button>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="4" class="text-center py-4">暂无类型数据</td>
    </tr>
@endforelse

模态框部分修改wire:click，不再传入参数：

<div id="popup-modal" tabindex="-1" class="fixed top-0 left-0 right-0 z-50 hidden p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full flex justify-center items-center">
    <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
        <div class="p-6 text-center">
            <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">确定要删除该类型吗？</h3>
            <button wire:click="deleteType" data-modal-hide="popup-modal" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
                Yes, delete!
            </button>
            <button data-modal-hide="popup-modal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
                Cancel
            </button>
        </div>
    </div>
</div>

• 方案一：逻辑简单直观，无需修改组件类，但数据量大时会生成大量DOM元素，可能影响页面性能。
• 方案二：仅使用一个模态框，DOM结构更简洁，性能更优，适合数据量大的场景，需要维护组件属性和额外方法。

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