Wire:loading.remove wire:target wire:loading and wire:target and Delete

[yahhoo]

The first time will be executed as intended, but the second and subsequent ones will execute a different element from the target.
I hope you can see the details in the image below.
Do you have a solution in Livewire?

Blade

<div>
<h2>User List</h2>
        <ul>
        @foreach($users as $user)
            <div>
            <div wire:loading.remove wire:target="deleteUser({{ $user->id }})">
                <li> {{ $user->name }}<button wire:click="deleteUser({{ $user->id 
            }})">delete</button></li>
            </div>
            <div wire:loading wire:target="deleteUser({{ $user->id }})">
                Removing...
            </div>
            </div>
        @endforeach
        </ul>
</div>

Component
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\User;

class UserList extends Component
{
    public $users;
    public function mount()
    {
        $this->users = User::all();
    }
    public function deleteUser($id)
    {
        try {
            $this->users = $this->users->filter(fn (User $user) => $user->id !== $id);
            User::findOrFail($id)->delete();
        } catch (\Throwable $th) {
            //throw $th;
        }
    }
    public function render()
    {
        return view('livewire.counter');
    }
}

[skywalker]

Hey, @yahhoo

No need to define the id on wire:loading.target="". All what you need to do is to define the method or the property name inside the wire:loading.target="YourMethod"

[yahhoo]

you don’t know me, but I will always be grateful for your help.
thank youヽ(^o^)丿
I followed your advice and modified the code, but it doesn’t do what I want. The modified code is shown below. The image shows the result.

BLADE

<ul>
        @foreach($users as $user)
            <div>
            <div wire:loading.remove wire:target="deleteUser">
                <li> {{ $user->name }}<button wire:click="deleteUser({{ $user->id }})">delete</button></li>
            </div>
            <div wire:loading wire:target="deleteUser">
                Removing...
            </div>
            </div>
        @endforeach
  </ul>

[Pom]

Looks like a DOM diffing issue. Try adding a key to your top-level div

<div wire:key="{{ $loop->index }}">

Troubleshooting | Laravel

[yahhoo]

(人❛ᴗ❛)♪тнайк чоц POM ♪(❛ᴗ❛*人)

wire:key
＼(^o^)／ * ٩(ˊᗜˋ*)و Congratulations!

If there’s a wire:target, I didn’t think there’d be a wire:key.
reminder

<ul>
    @foreach ($users as $user)
         <div wire:key="{{ $user->id }}">
             <div wire:loading.remove wire:target="deleteUser({{ $user->id }})">
                <li > {{ $user->name }}<button wire:click="deleteUser({{ $user->id }})">delete</button></li>
             </div>
                 <div wire:loading wire:target="deleteUser({{ $user->id }})">
                        Removing...
                 </div>
            </div>
     @endforeach
 </ul>

[skywalker]

Hey, @yahhoo
Sorry for the late response

As @Pom said you can define a key for your element you let livewire know which element in the page you are dealing with (in simple explanation). and wire:target is for the loading state it’s not for the element itself. Cause you can define the same wire:target in multiple elements you want to make action with. but the livewire id should be unique on each element.

I tried to make it as simple as possible. Hope this make sense to you.

Happy coding mate.