Error with 2 livewire components in one page. Livewire 3

Hello

I have list of recipes

livewire/recipe-list.blade.php:

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

In <x-recipe-card /> I am calling 2 livewire components:

<!-- Likes & Dislikes -->
<livewire:like-dislike :recipe="$recipe" :key="$recipe->id"/>

<!-- Bookmark -->
<livewire:bookmark :recipe="$recipe" :key="$recipe->id"/>

Everything was ok when there was only like-dislike, but after adding bookmark and filtering list of recipes I see weird id's instead of those components:

< wire:id="IOln9vUT2Sf5BURAyILS">

How it looks in life: https://i.ibb.co/4wfxbKVK/screenshot.jpg

Would be grateful for your help

tykus

11 months ago

Level 104

Make sure the wire:keys are unique on the page - you are reusing only the $recipe->id again and again; you can mitigate this issue by prefixing them to avoid collisions.

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

Make sure also that the keys are present and distinct within the nested component, e.g

<!-- Likes & Dislikes -->
<livewire:like-dislike :recipe="$recipe" wire:key="likeable-{{$recipe->id}}"/>

<!-- Bookmark -->
<livewire:bookmark :recipe="$recipe" wire:key="bookmarkable-{{$recipe->id}}"/>

1 like

dmytroshved

11 months ago

Level 6

@tykus Thanks, it is also helpful, but the main problem was because of comments in my livewire view:

<!-- -->

dmytroshved

11 months ago

Best Answer

Level 6

I managed to solve this problem

The error was because of the comments inside livewire view:

bookmark.blade.php:

<!-- Bookmark button --> <-- remove them
<button
    wire:click.throttle="toggleSave()"

   ...
</button>

tykus

11 months ago

Level 104

@Dmytro_Shved are you sure the problem is the HTML comment or do you lack a single root element? I assumed earlier that we were dealing with a snippet, but now wondering if it is your whole component?

For example, the HTML comments should be okay in the following context:

<div>
  <!-- Likes & Dislikes -->
  <livewire:like-dislike :recipe="$recipe" wire:key="likeable-{{$recipe->id}}"/>

  <!-- Bookmark -->
  <livewire:bookmark :recipe="$recipe" wire:key="bookmarkable-{{$recipe->id}}"/>
</div>

dmytroshved

11 months ago

Level 6

@tykus

This code:

<!-- Bookmark button --> <-- remove them
<button
    wire:click.throttle="toggleSave()"

   ...
</button>

Is my livewire blade component for Bookmark.php, and yes, problem was actually with comments on top of that file

Best regards

tykus

11 months ago

Level 104

@Dmytro_Shved okay, but the problem is not with the comment itself; however, it is considered a HTML element so Livewire tries to write content to it... the comment would fine in this context:


<button
    wire:click.throttle="toggleSave()"
>
  <!-- Bookmark button -->
   ...
</button>

In any case, the original component example

<!-- Likes & Dislikes -->
<livewire:like-dislike :recipe="$recipe" wire:key="likeable-{{$recipe->id}}"/>

<!-- Bookmark -->
<livewire:bookmark :recipe="$recipe" wire:key="bookmarkable-{{$recipe->id}}"/>

should have a single root element (if it does not already!

1 like

Please or to participate in this conversation.