I am using Laravel Livewire - 3
when I try to search the artist-related data it works fine but when I clear the whole input search data it gets the Uncaught TypeError: Cannot read properties of null (reading 'before') | livewire
<div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2">
<x-jet-input class="mt-3 block w-full" wire:model.live.debounce.500ms="search" type="search"
placeholder="{{ __('searchAttribute', ['attribute' => __('artists')]) }}" />
</div>
component code
public function render()
{
$this->query = new Artist();
return view('livewire.admin.artist.index', [
'artists' => $this->query->search($this->search)->orderBy('id', 'desc')->paginate(10)
])->layout('layouts.admin');
}
I see there's a data table below the form in the image you posted, so I suspect your problem is the same that happened to me a few minutes ago: Livewire is getting lost while manipulating HTML elements between renders.
To solve that, you must add wire:key
to HTML elements and :key="{{ $uniqueId }}"
to Livewire components inside @foreach
loops.
Example:
<!-- Before -->
<ul>
@foreach($list as $item)
<li>
{{ $item->name }}
</li>
@endforeach
</ul>
<!-- After-->
<ul>
@foreach($list as $item)
<li wire:key='list_item_{{ $item->id }}'>
{{ $item->name }}
</li>
@endforeach
</ul>
Source: https://livewire.laravel.com/docs/troubleshooting#adding-wirekey