Closed sueboy19 closed 3 years ago
I think using $loop->index as your key could be causing you problems, try using $order->id as the key as it should be unique to each record.
The other thing is try is putting wire:key on the <tr>
instead, (and using the id as I suggested)
@foreach($orders as $key => $order)
<tr wire:key="{{ $order->id }}">
I try at tr
<tr wire:key="{{ $order->id }}">
get more error.
Show index then click page 2, get error is
Uncaught (in promise) TypeError: Cannot read property 'fingerprint' of null
And Page 2 record is only show one record. Other records is old page 1.
Search then Clean Search get error is
Uncaught (in promise) TypeError: Cannot read property 'fingerprint' of null
And All records only last two record and button number is warring.
I try many way. I think wire:key not real key.
Button use wire:key is different @livewire(..., key(...)) have two different mean.
https://laravel-livewire.com/docs/2.x/troubleshooting
wire:key how to use is different we think.
got the same issue, any work around for this?
@theonly27 Don't use @livewire Just use button. Now I do this way.
This indeed looks like Livewire not being able to keep track of the correct elements. I've had similar problems in my projects. My eventual solution was to use AlpineJs for this. Alpine was able to keep track of the correct items.
Ok, so I have just pulled down your code into one of my test projects and got it working, as I suggested, you need to use $order->id
for the wire:key on the <tr>
but you also need it on the child component @livewire('delete', ['id' => $order->id], key('delete'.$order->id))
The unique ID is important as the DOM diffing won't work correctly as you have found. I tried it without passing the key to the child component and that broke it.
So I would recommend in any situation you need this, to put wire key on the parent most element inside a loop (like the
Hope this helps!
Full code is below
@foreach($orders as $key => $order)
<tr wire:key="{{ $order->id }}">
<td>
A. {{ $order->id }}
B. <button data-toggle="modal" class="btn btn-info"
wire:click="show({{ $order->id }})">Show</button>
</td>
<td>
C. @livewire('delete', ['id' => $order->id], key('delete'.$order->id))
</td>
</tr>
@endforeach
@joshhanley Thank you very much. I try then now get all answer. Correct is 5 and 6.
@foreach($orders as $key => $order)
<tr wire:key="{{ $order->id }}">
<td>
A. {{ $order->id }}
B. <button data-toggle="modal" class="btn btn-info"
wire:click="show({{ $order->id }})">Show</button>
</td>
<td>
C. @livewire('delete', ['id' => $order->id], key('delete'.$order->id))
</td>
</tr>
@endforeach
This is all test result.
show, add, edit, delete, @livewire delete all use $loop->index
show, add, edit, delete use $loop->index, @livewire delete use $order->id
show, add, edit, delete, @livewire delete all use $order->id
Add at TR wire:key="{{ $order->id }}
4.
show, add, edit, delete, @livewire delete all use $loop->index
5.
show, add, edit, delete use $loop->index, @livewire delete use $order->id
6.
show, add, edit, delete, @livewire delete all use $order->id
7. show, add, edit, delete, @livewire delete remove unique key name. this mean is wire:key="delete{{ $order->id }}" -> wire:key="{{ $order->id }}"
key('delete'.$order->id)) -> key($order->id)
Posting all the screenshots is confusing.
So did you get it work in the end?
If so can you please close the issue, and maybe put a one line summary (not screenshots) of what worked best incase someone else comes across this issue in the future. :)
👋 Oh Hi! I'm Squishy, the friendly jellyfish that manages Livewire issues.
I see this issue has been closed.
Here in the Livewire repo, we have an "issues can be closed guilt-free and without explanation" policy.
If for ANY reason you think this issue hasn't been resolved, PLEASE feel empowered to re-open it.
Re-opening actually helps us track which issues are a priority.
Reply "REOPEN" to this comment and we'll happily re-open it for you!
(More info on this philosophy here: https://twitter.com/calebporzio/status/1321864801295978497)
Description
Step
Exact steps to reproduce
Stripped-down, copy-pastable code snippets
orders.blade.php
Orders.php
delete.blade.php
Delete.php
A. B. always get Correct id. But C. can't. When follow Step, C always $order->id get 5. If change key: Use $order->id or 'delete'.$order->id get other problem. Only use $loop->index still get problem.
['id' => $order->id] change ['order' => $order] get same problem. Always $order->id get 5.
If use Div try to include show or delete action, still not use.
I think Nesting Components use "@livewire" have some bug inside for Search.
Context