Problem with wire:key for livewire component inside blade component. Livewire 3

Question

Problem description:

In my RecipeList.php I am showing the list of recipes:


@forelse($recipes as $recipe)
    <x-recipe-card :recipe="$recipe"/>
@empty
    <p>error</p>
@endforelse

Inside <x-recipe-card :recipe="$recipe"/> I have another livewire component:

<livewire:like-dislike :recipe="$recipe"/>

Upon the initial page load, the like buttons are displayed correctly on all cards. However, as soon as I change the sorting ($sort) within the same parent component, RecipeList, the buttons only remain on the first recipe, while they disappear from all subsequent ones.

Sequence Of Steps:

Load recipe list page (pagination, default sorting "popularity").
Like/Dislike buttons are visible on each recipe card.
Select "newest" or "oldest" in the dropdown sorting list.
Problem: The first recipe still has buttons, but the rest have disappeared.

What i tried:

I added wire:key, but it didn't help, on the contrary, it even caused an error in the logic of alpine.js inside x-recipe-card

@forelse($recipes as $recipe)
    <div wire:key="{{ $recipe->id }}">
        <x-recipe-card :recipe="$recipe"/>
    </div>
@empty
    <p>error</p>
@endforelse

Conclusion:

How can i make the parent component RecipeList.php be able to track the child LikeDislike.php provided that it is in the blade component

Could you try @livewire('like-dislike', ['recipe' => $recipe], key($recipe->id))? I believe it's something to do with how livewire handles re-rendering. — DeveloperLV
– DeveloperLV, Commented May 19 at 8:41

Dmytro Shved · Accepted Answer · 2025-05-21 16:47:34Z

0

I found a solution

1. Set wire:key inside blade loop:


@forelse($recipes as $recipe)
<div wire:key="{{ $recipe->id }}">
    <x-recipe-card :recipe="$recipe"/>
</div>
@empty
    <p>error</p>
@endforelse

2. Set :key for livewire component in x-recipe-card:

<livewire:like-dislike :recipe="$recipe" :key="$recipe->id"/>

edited May 21 at 16:47

answered May 19 at 15:29

Dmytro Shved

1237 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem with wire:key for livewire component inside blade component. Livewire 3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related