wire:click result in an exception

Hi, I have a problem with a custom livewire component. My button:

<button wire:click="nextReportStep" class="bttn-2">Weiter</button>

<button wire:click="nextReportStep" class="bttn-2">Weiter</button>

And this function in my class:

public function nextReportStep(): void
{
    $this->reportStep++;
}

public function nextReportStep(): void
{
    $this->reportStep++;
}

Result in this: Alpine Expression Error: undefined Expression: "$wire.nextReportStep" Uncaught String {'Could not find Livewire component in DOM tree', el: button.bttn-2, expression: '$wire.nextReportStep'}

16 Replies

SLINZENOP•7mo ago

bump?

Dan Harrin•7mo ago

what class is it registered on double check its actually a livewire component and not a form component etc

SLINZENOP•7mo ago

On my page I include the component:

@livewire('sidebar-actions', ['reportId' => $reportId])

@livewire('sidebar-actions', ['reportId' => $reportId])

My class:

class PodcastSidebarActions extends Component
{
    public int $reportId;
    public int $reportStep = 1;

     //...


     /**
     * Sets the next report step.
     *
     * @return void
     */
     public function nextReportStep(): void
     {
         $this->reportStep++;
     }
}

class PodcastSidebarActions extends Component
{
    public int $reportId;
    public int $reportStep = 1;

     //...


     /**
     * Sets the next report step.
     *
     * @return void
     */
     public function nextReportStep(): void
     {
         $this->reportStep++;
     }
}

Component template:

<div>
    <div class="float-end">
        <button wire:click="nextReportStep" class="bttn-2">Weiter</button>
    </div>
</div>

<div>
    <div class="float-end">
        <button wire:click="nextReportStep" class="bttn-2">Weiter</button>
    </div>
</div>

Dan Harrin•7mo ago

very odd dont think its related to filament what is the Component class you're extending

SLINZENOP•7mo ago

I just use Filament 😄

livewire.js?id=770f7738:1123 Alpine Expression Error: undefined

Expression: "$wire.nextReportStep"

 
livewire.js?id=770f7738:1127 Uncaught 
String {'Could not find Livewire component in DOM tree', el: button.bttn-2, expression: '$wire.nextReportStep'}

livewire.js?id=770f7738:1123 Alpine Expression Error: undefined

Expression: "$wire.nextReportStep"

 
livewire.js?id=770f7738:1127 Uncaught 
String {'Could not find Livewire component in DOM tree', el: button.bttn-2, expression: '$wire.nextReportStep'}

Dan Harrin•7mo ago

you're using livewire.

SLINZENOP•7mo ago

Yes with Filament

Dan Harrin•7mo ago

but this is nothing to do with filament, its a livewire component

SLINZENOP•7mo ago

Without Filament it works

Dan Harrin•7mo ago

i dont know how that would be the case

SLINZENOP•7mo ago

Its very strange

Dan Harrin•7mo ago

it looks like you're doing everything right so if you create a reproduction repo and post it here i will have a look if i cant find the problem at first glance then i will ask you to open an issue

SLINZENOP•7mo ago

Okay, I will do it 🙂

Dan Harrin•7mo ago

and please create a fresh project to reproduce with a new component, dont copy your old one

SLINZENOP•7mo ago

Okay, no problem

Dennis Koch•7mo ago

Not sure whether that helps, but try giving your component a key

Gaming

Programming

wire:click result in an exception