Laravel / Livewire - Modal deletes first row

Question

basically i am fetching some data from the database and i have a delete button that pops up a confirmation modal.

After i click on delete it deleted the wrong id, doesn't matter witch row i want to delete it always deletes the first.

This is my loop:

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

As you can see i am using data-modal-target="popup-modal" data-modal-toggle="popup-modal" in the button

I am guessing the problem comes with data-modal-target="popup-modal", but i am not sure what to add there.

And the 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>

Now i removed all of the unnecessary design classes so i don't want you to get confused. As you can see i am using wire:click = "deleteType({{ $type->id }})"

And this is my method for deleting:

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

After i click Yes, delete! the first row is deleted instead of the selected one, how do i get over this?

Answer 1

You are missing something, I don't see any where the selectedId for deleting. Assuming you have only one modal (As you should) so the wire:click = "deleteType({{ $type->id }})" is always the same (or the first row or the last).

My approach should be declare one variable that changes when you click on delete button:

In your Livewire class:

    ...
    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;
    }
    ...

The button in your table:

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

And then the button in the 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()" 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>

Then it should work 100% if not, maybe using some key indexes and some alpinejs should make the job.