Uncaught Snapshot missing on Livewire component with id:

I am using Livewire3 for making crud for a specific model (Languages). In blade I am showing data in table and it works correctly in first render. When I search it only can find first row's of table's data, but when search others it gives an error: Uncaught Snapshot missing on Livewire component with id: specific id.

Livewire's Index component:

class Index extends Component
{
    use SearchTrait;

    public function render(LanguageRepository $repository): View
    {
        return view('livewire.features.languages.index', [
            'languages' => $repository->getFiltered($this->search)
        ]);
    }
}

Query:

public function getFiltered($search)
    {
        return Language::select('id', 'slug', 'title', 'thumbnail', 'created_at')
            ->when($search, function ($query, $search) {
                return $query->where('title', 'like', '%' . $search . '%');
            })->get();
    }

Index blade:

<div class="block block-rounded">
    <div class="block-content">
        <div class="filter-table pb-4">
            <div class="row w-100 h-100 m-0 p-0">
                <div class="col-lg-4 p-0">
                    <label for="search" class="w-100 ps-0">
                        <input wire:model.live.debounce.200ms="search" type="text" class="form-control form-control-sm w-100"
                               id="search" name="search" placeholder="Search" >
                    </label>
                </div>
            </div>
        </div>
        <ul>
            <table class="table-bordered">
                @foreach($languages as $item)
                    <tr>
                        <td class="px-2 py-1">{{ $item->title }}</td>
                        <td class="px-2 py-1">@livewire('features.languages.edit', [$item], key("language-{$item->id}"))</td>
                    </tr>
                @endforeach
            </table>
        </ul>
    </div>
</div>

Edit component:

class Edit extends Component
{
    public Language $item;

    public function mount($item): void
    {
        $this->item = $item;
    }

    public function render(): View
    {
        return view('livewire.features.languages.edit');
    }
}

Edit blade:

<div>
    {{ $item->id }}
</div>

Result:

Search case: https://github.com/livewire/livewire/assets/58428722/05770bd8-1ac8-47d9-a8eb-08faf734d7a6

How can I solve this issue? I have been facing this problem for several days. Still haven't found a solution

vlchris

2 years ago

Level 2

Instead of this..

@livewire('features.languages.edit', [$item], key("language-{$item->id}"))

Have you tried passing item in like this:

@livewire('features.languages.edit', ['item' => $item], key("language-{$item->id}"))

Then in your mount remove that parameter.. It should be automatically set when initializing. Not sure if that's your actual issue but it should auto bind item in your public declaration.

Also, when you dd() your getFiltered method, does it return a proper collection?

abduazam

2 years ago

Best Answer

Level 15

@vlchris yes it retunrs correctly. I have solved this problem by adding: wire:key="language-row-{{ $item->id }}" to "tr" tag:

<tr wire:key="language-row-{{$item->id}}">
     <td class="px-2 py-1">{{ $item->title }}</td>
     <td class="px-2 py-1">@livewire('features.languages.edit', [$item], key("language-{$item->id}"))</td>
</tr>

4 likes

carlos_ruiz

2 years ago

Level 1

@abduazam I had the same problem and thanks to your example I managed to see that the same wire:key cannot be repeated.

   @foreach ($posts as $post)
                        <tr wire:key="post-row-{{$post->id}}" >
                            <td class="px-6 py-4">
                                <livewire:edit-post :post="$post" wire:key="update-{{ $post->id }}" />
                                
                                <livewire:delete-post :post="$post" wire:key="delete-{{ $post->id }}"/>
                            </td>
                        </tr>
                    @endforeach

In each component I put a different wire:key and also to my

5 likes