Skip to content

Commit ea05c24

Browse files
jtymanjrjtymanjraig
jtymanjr
and
jtymanjraig
authored
Fix Livewire chirp display (#46)
* Add wire:key to Livewire Chirp display to resolve issue of Livewire functionality loss after adding chirps. * Undo formatting change. * Fix formatting change again --------- Co-authored-by: Jaroslav Tyman <[email protected]>
1 parent 9d7c501 commit ea05c24

File tree

3 files changed

+10
-10
lines changed

3 files changed

+10
-10
lines changed

‎resources/docs/livewire/deleting-chirps.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ new class extends Component
6565

6666
<div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
6767
@foreach ($chirps as $chirp)
68-
<div class="p-6 flex space-x-2">
68+
<div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
6969
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
7070
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
7171
</svg>
@@ -144,7 +144,7 @@ $delete = function (Chirp $chirp) {
144144

145145
<div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
146146
@foreach ($chirps as $chirp)
147-
<div class="p-6 flex space-x-2">
147+
<div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
148148
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
149149
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
150150
</svg>

‎resources/docs/livewire/editing-chirps.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ new class extends Component
4747

4848
<div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
4949
@foreach ($chirps as $chirp)
50-
<div class="p-6 flex space-x-2">
50+
<div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
5151
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
5252
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
5353
</svg>
@@ -108,7 +108,7 @@ $edit = fn (Chirp $chirp) => $this->editing = $chirp; // [tl! add:end]
108108

109109
<div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
110110
@foreach ($chirps as $chirp)
111-
<div class="p-6 flex space-x-2">
111+
<div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
112112
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
113113
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
114114
</svg>
@@ -309,7 +309,7 @@ new class extends Component
309309
<div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
310310
<!-- [tl! collapse:start] -->
311311
@foreach ($chirps as $chirp)
312-
<div class="p-6 flex space-x-2">
312+
<div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
313313
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
314314
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
315315
</svg>
@@ -380,7 +380,7 @@ $edit = fn (Chirp $chirp) => $this->editing = $chirp;
380380
<div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
381381
<!-- [tl! collapse:start] -->
382382
@foreach ($chirps as $chirp)
383-
<div class="p-6 flex space-x-2">
383+
<div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
384384
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
385385
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
386386
</svg>

‎resources/docs/livewire/showing-chirps.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ new class extends Component
5353
// <!-- [tl! remove] -->
5454
<div class="mt-6 bg-white shadow-sm rounded-lg divide-y"> <!-- [tl! add:start] -->
5555
@foreach ($chirps as $chirp)
56-
<div class="p-6 flex space-x-2">
56+
<div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
5757
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
5858
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
5959
</svg>
@@ -85,7 +85,7 @@ state(['chirps' => fn () => Chirp::with('user')->latest()->get()]); // [tl! add]
8585
// <!-- [tl! remove] -->
8686
<div class="mt-6 bg-white shadow-sm rounded-lg divide-y"> <!-- [tl! add:start] -->
8787
@foreach ($chirps as $chirp)
88-
<div class="p-6 flex space-x-2">
88+
<div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
8989
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
9090
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
9191
</svg>
@@ -216,7 +216,7 @@ new class extends Component
216216
<div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
217217
<!-- [tl! collapse:start] -->
218218
@foreach ($chirps as $chirp)
219-
<div class="p-6 flex space-x-2">
219+
<div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
220220
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
221221
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
222222
</svg>
@@ -253,7 +253,7 @@ on(['chirp-created' => $getChirps]); // [tl! add:end]
253253
<div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
254254
<!-- [tl! collapse:start] -->
255255
@foreach ($chirps as $chirp)
256-
<div class="p-6 flex space-x-2">
256+
<div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
257257
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
258258
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
259259
</svg>

0 commit comments

Comments
 (0)