Livewire: Unable to call component method. Public method [childMethodName] not found on component: [parent]

Question

Using Laravel Livewire, I have a parent and a (repeating) child. The child blade has a call to childMethod() through wire:click="childMethod()".

The problem is that parent->childMethod() is called while I wanted child->childMethod() to be called.

The parent component

class StatementsTable extends Component // parent
{
    public function render()
    {
        return view('livewire.statements-table', [
            'statements' => Statement::limit(10)->get()
        ]);
    }
}

The parent statements-table.blade

<table class="table">
    @foreach($statements as $statement)
        @livewire('statement-line', ['statement' => $statement], key($statement->id))
    @endforeach
</table>

The child component:

class StatementLine extends Component
{
    public $statement;
    public $calls = 0;

    public function childMethod()
    {
        $this->calls += 1;
    }

    public function mount($statement): void
    {
        $this->statement = $statement;
    }

    public function render()
    {
        return view('livewire.statement-line');
    }
}

The child statement-line.blade

{{-- dd(get_defined_vars()) --}}
<tr>
    <td>{{$statement->name}}</td>
    <td>{{$statement->date}}</td>
    <td>{{$calls}}</td>
    <td><button wire:click="childMethod">Plus</button></td>
</tr>

Why do I get

Livewire\Exceptions\MethodNotFoundException
Unable to call component method. Public method [childMethod] not found on component: [statements-table]

@PaulH I am encountering this issue as well. Did you find a solution? — bfuzze
– bfuzze, Commented Feb 20, 2021 at 8:11

Mary Soco Ortiz · Accepted Answer · 2021-12-13 08:05:22Z

8

Had the same problem. The solution was:

Make sure the child's view has ONE root element as indicated in Livewire Docs.

answered Dec 13, 2021 at 8:05

Mary Soco Ortiz

811 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PaulH Over a year ago

Altough this is very important indeed, that is not the reason of the issue. The single root element of the parent is <table> and the single root element of the child is <tr>

Moisés Corcho Pérez · Accepted Answer · 2024-05-14 20:38:18Z

2

If you are using livewire version 3, the 'emit' method has been renamed to 'dispatch'. (Likewise emitTo() and emitSelf() are now dispatchTo() and dispatchSelf()).

Look at the documentation: https://livewire.laravel.com/docs/upgrading#events.

answered May 14, 2024 at 20:38

Moisés Corcho Pérez

211 bronze badge

1 Comment

PaulH Over a year ago

This should not be an answer, but an comment, since this is not an answer to the original question.

rottitime · Accepted Answer · 2024-05-29 16:01:13Z

1

In Livewire 3 function emit() is renamed as function dispatch()

edited May 29, 2024 at 16:01

rottitime

2,4972 gold badges23 silver badges37 bronze badges

answered May 25, 2024 at 9:31

Ifet Martinovic

112 bronze badges

2 Comments

pierpy Over a year ago

Hi, your answer is a duplicate:. Please read how to ask

PaulH Over a year ago

This should not be an answer, but an comment, since this is not an answer to the original question

Sidharth · Accepted Answer · 2021-01-16 16:11:51Z

0

You can scope your callbacks in livewire have a look at the documentation available here https://laravel-livewire.com/docs/2.x/events#scoping-events

For your case you should scope to self like this

<button wire:click="$emitSelf('childMethod')">

answered Jan 16, 2021 at 16:11

Sidharth

1,9252 gold badges16 silver badges24 bronze badges

Comments

Mo An Bl · Accepted Answer · 2021-04-22 03:57:16Z

0

for passing parameters (string) in a function make sure you are using single '' quotes , note double qoutes "". like :

wire:click="activeTab('product')"

answered Apr 22, 2021 at 3:57

Mo An Bl

561 bronze badge

Comments

Abrahampo1 · Accepted Answer · 2025-06-20 14:10:35Z

0

To resolve the issue, ensure that only one element serves as the root of your component.

My error was setting styles as another root element.

This won't work:

<style>
    .example {
        display: flex
    }
</style>

<div>
    <div wire:click="exampleMethod" class="example">EXAMPLE</div>
</div>

To resolve the issue, it is necessary to relocate all the elements to the root.

This will work:

<div>
    <style>
        .example {
            display: flex
        }
    </style>
    <div wire:click="exampleMethod" class="example">EXAMPLE</div>
</div>

Consequently, the issue has been resolved.

answered Jun 20 at 14:10

Abrahampo1

1

1 Comment

PaulH Jun 26 at 20:52

One element as root indeed, but that is already the OK in the OP. This tip does not resolve the issue in the OP.

Collectives™ on Stack Overflow

Livewire: Unable to call component method. Public method [childMethodName] not found on component: [parent]

6 Answers 6

1 Comment

1 Comment

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related