counting <li> tags in livewire
Two weeks ive been trying to solve this one simple problem.
I have simple page that shows list of users. there is also a basic search functionality. All i want to do is console log number of <li> tags after search is performed. The problem is that console is always one step behind and shows the number of tags from before search was performed (before component is updated).
How to count tags after component is updated?
I have tried all relevant Livewire lifecycle hooks but still cant find a solution
livewire component:
class Search extends Component
{
public $search='';
public function updatedSearch()
{
$this->dispatch('eventTriggered');
}
protected function search()
{
return $this->search === ''
? User::get()
: User::where('name', 'like', '%'.$this->search.'%')->get();
}
public function render()
{
return view('livewire.search',[
'searchResults' => $this->search()
]);
}
}
blade component
<div>
<input wire:model.live="search" type="text" >
<ul>
@foreach ($searchResults as $result)
<li wire:key = "{{ $result->id }}">
{{ $result->name }}
</li>
@endforeach
</ul>
@script
<script>
Livewire.on('eventTriggered', () => {
console.log(document.getElementsByTagName('li').length);
})
</script>
@endscript
</div>
Many thanks.
Member 
Member Happy to help with this! Before I do, is there a reason why you're counting elements on the page like this? There might be an easier way to achieve what you're doing here.
Member Hi Alex, many thanks for your quick reply. I have an external js library that needs refreshing each time a specific tag is added/removed ( its a lightbox gallery - you helped me with it about month ago on this forum :) . However it still doesnt work as expected because it "gets" tags from one step before (hope it makes sense), so to solve it im starting with first simple step - logging the correct number of <li> tags after component update.
Member Ah yes I remember! Let me have a play around with this and I'll see if there's an accurate way to fetch that count. Can't think off the top of my head right now, but leave it with me!
Member Finally I found the solution (with a little help from Claude). so for future reference :
we dont need updatedSearch() hook and in the blade file we use requestAnimationFrame(() :
@script
<script>
document.addEventListener('livewire:initialized', () => {
Livewire.hook('commit', ({ component, respond, succeed, fail }) => {
succeed(({ snapshot, effect }) => {
requestAnimationFrame(() => {
console.log(document.getElementsByTagName('li').length);
});
});
});
});
</script>
@endscript