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

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]
phplaravellaravel-livewire


Solution 1:[1]

Had the same problem. The solution was:

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

Solution 2:[2]

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')">

Solution 3:[3]

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mary Soco Ortiz
Solution 2 Sidharth
Solution 3 Mo An Bl

Related Questions