Problem

I am working with PHP Livewire 3 and Volt and I encounter an issue when including a livewire skeletton for my component. After adding a skeletton the component does not get indexed right – means the search does work properly. I’ve tried to add wire:ignore to try preventing this isssue but that did not help me.

My Components

Parent-Component

<div class="mt-4 mx-8">

<sl-input wire:ignore wire:model.live="search" class="w-max" placeholder="Search for a monitor...">
    <sl-icon name="search" slot="prefix"></sl-icon>
</sl-input>

@php
$monitor_count = count($monitors);
@endphp

@if($monitor_count > 0)
@foreach($monitors as $monitor)
<div class="border-other-grey border-2 rounded-2xl mt-4" wire:key="{{$monitor->id}}">
    <livewire:monitors.card lazy="true" :monitor="$monitor" :key="$monitor->id" />
</div>
@endforeach
@else
<h1 class="text-primary-blue font-koulen text-2xl text-center">Currently no Monitors avaibale! </h1>
@endif

Child-Component
new class extends Component
{
use RepositoryCollector;

public $collect_repos_error;
public $error_head;

public Monitor $monitor;

public function mount(Monitor $monitor): void
{
    try {
        if ($monitor->repositories()->get()->isEmpty()) {
            $this->collect_repositories($monitor);
        }
        $this->monitor = $monitor;
    } catch (Exception $e) {
        $this->collect_repos_error = $e->getMessage();
        $this->error_head = "Seems like something went wrong...";
    }
}

public function reload_repositories()
{
    $this->monitor->repositories()->delete();
    $this->collect_repositories($this->monitor);

    $this->dispatch("repositories-updated", monitor_id: $this->monitor->id);
}

public function get_repositories()
{
    return $this->monitor->repositories()->get();
}


public function placeholder()
{
    return <<<'HTML'
    <center class="p-10" wire:ignore>
        <sl-spinner class="text-7xl" style="--track-width: 9px;"></sl-spinner>
    </center>
    HTML;
}

Reference