Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

codingwithrk's avatar

Livewire Search issue

<div wire:ignore.self>
    <div class="navbar bg-base-100 sticky top-0 z-50">
        <div class="container mx-auto">
            <input type="text" placeholder="Search" class="input input-bordered w-full" wire:model.live="search"/>
            {{--            <x-button label="Search" @click.stop="$dispatch('mary-search-open')" class="w-full"--}}
            {{--                      icon="o-magnifying-glass"/>--}}
        </div>
    </div>
    <div class="flex flex-wrap justify-center gap-8 pt-10 text-center text-lg">
        @if(count($data) > 0)
            @foreach($data as $key => $value)
                <div class="card card-compact bg-base-100 shadow-xl w-32" wire:key="{{ $value->id }}"
                     id="{{ $value->id }}">
                    <div class="card-body flex flex-col justify-between">
                        <div class="flex justify-center">
                            <x-rk-icons::icon :name="$value->icon" :color="$value->color"/>
                        </div>
                        <h2 class="card-title flex justify-center">{{ $value->name }}</h2>
                        @php
                            $copyText = '<x-rk-icons::icon name="'. $value->icon .'"/>'
                        @endphp
                        <livewire:copy-button :textToCopy="$copyText"/>
                    </div>
                </div>
            @endforeach
        @else
            <h1 class="text-5xl">Not found</h1>
        @endif
    </div>
</div>
<?php

namespace App\Livewire;

use App\Models\Icon;
use Livewire\Component;

class IconsData extends Component
{
    public $data;
    public $search = '';

    public function render()
    {
        $this->data = Icon::where('status', 1)
            ->where('name', 'like', '%' . $this->search . '%')
            ->orderBy('name')
            ->get();
        return view('livewire.icons-data', [
            'data' => $this->data
        ]);
    }
}

When i try to search

livewire.js?id=cc800bf4:4493 Uncaught Snapshot missing on Livewire component with id: uODYGg8p5EnAzJqDNs2y

I am getting this error

0 likes
3 replies
jlrdw's avatar

Check for missing tags, your nesting also meaning do you have a form nested wrong. I.e., do you have a form that should be it's own component but under a parent, or vice versa.

I don't know your project, but just some things to check.

Snapey's avatar

wire:ignore on the whole component?

try wrapping the whole thing in another div that Livewire can hang its props off

codingwithrk's avatar
codingwithrk
OP
Best Answer
Level 25

Thank You .

But I used to Alpine JS To solve it

1 like

Please or to participate in this conversation.