Laravel / Livewire - 模态删除第一行

Question

基本上我从数据库中获取一些数据，我有一个弹出确认模式的删除按钮。

我点击删除后它删除了错误的

id

，不管女巫行我想删除它总是删除first.

这是我的循环：

@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>

      //other <th> tags
    </tr>

<td class="py-4 w-1/4">
    <button data-modal-target="popup-modal" data-modal-toggle="popup-modal" type="button">
          Delete
    </button>
</td>

如您所见，我在按钮中使用

data-modal-target="popup-modal" data-modal-toggle="popup-modal"

我猜问题出在

data-modal-target="popup-modal"

，但我不确定要在那里添加什么。

和模态：

<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">
    <button wire:click = "deleteType({{ $type->id }}) 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>
</div>

现在我删除了所有不必要的设计类，所以我不想让你感到困惑。 如您所见，我正在使用

wire:click = "deleteType({{ $type->id }})"

这是我删除的方法：

public function deleteType($typeID)
{
    $types = Types::findOrFail($typeID);
    $types->delete();
    $this->allTypes = $this->fetchTypes();
}

我点击后

Yes, delete!

第一行被删除而不是选定的，我该如何克服这个问题？

Answer 1

你遗漏了一些东西，我没有看到任何要删除的 selectedId 。假设您只有一个模态（如您所愿），那么

wire:click = "deleteType({{ $type->id }})"

始终相同（或第一行或最后一行）。

我的方法应该是声明一个变量，该变量在您单击删除按钮时发生变化：

在您的 Livewire 课程中：

    ...
    public $selectForDeleteingType = 0;
    ...
    public function changeDelete($type){
        $this->selectedForDeletingType = $type;
    }
    public function deleteType()
    {
        if($this->selectedForDeletingType == 0){
              return;
        }
        $types = Types::findOrFail($this->selectForDeletingType);
        $types->delete();
        $this->allTypes = $this->fetchTypes();
        $this->selectForDeletingType = 0;
    }
    ...

你桌子上的按钮：

<button wire:click="changeDelete({{$type->id}})" data-modal-target="popup-modal" data-modal-toggle="popup-modal" type="button">
          Delete
</button>

然后是模式中的按钮：

<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">
    <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>
</div>

然后它应该 100% 工作，如果不是，也许使用一些关键索引和一些 alpinejs 应该可以完成这项工作。