How to initialize wire:loading state in each row table use V1

#1

Hi…

How do I make the loading state in each does not run together like in the picture? runs on every row that is clicked

add1
add1769×373 7.81 KB

add
add746×480 11.8 KB

I’m using livewire version 1
my code

                    @foreach ($dataaplikasi as $item)
                        <tr>
                            <td>{{ ($loop->index+1) }}</td>
                            <td>{{ $item->descp }}</td>
                            <td>
                              <button   wire:click="adddata('{{ $item->descp }}')"
                                        type="button" class="btn btn-success"  
                                        wire:loading.remove>
                                        Add
                              </button>
                              <button wire:loading wire:target="adddata" class="btn btn-success" type="button" disabled>
                                <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                                Menambahkan...
                              </button>
                            </td>
                        </tr>
                    @endforeach

thanks :smiley:

#2

@riyan21 Make the button a livewire component, and define it with key on

@livewire('partials.button-table-spinner', ['item' => $item], key($item->id))