Level 41
I am reading the documentation right now. It's bizarre that you seemingly are not following the instructions. It's not $dispatchTo, it's $emitTo, and the parameters are not right. Pls work according to the docs.
Dec 9, 2023
10
Level 10
Help Needed with Livewire Event Dispatching in Livewire 3
Hello everyone,
I am currently facing an issue with event dispatching in Livewire 3 and would appreciate any assistance or insights you might offer. I'm trying to dispatch an event from a Blade to a Livewire component, but it seems the event is not being triggered or received by the target component.
In a Livewire component I have the replays for a thread. each reply has a edit button
<button wire:click="$dispatchTo('EditReply', 'setEditReply', { id: {{ $reply->id }} })"
>Edit Replay</button>
And this is the listener in my Livewire component (EditReply):
<?php
class EditReply extends Component
{
public Reply $reply;
protected $listeners = [
'setEditReply'
];
public function setEditReply($data)
{
$replyId = $data['id'];
dd($replyId);
$this->reply = Reply::findOrFail($replyId);
}
public function render(): View|Application|Factory|\Illuminate\Contracts\Foundation\Application
{
return view('livewire.forum.edit-reply');
}
}
However, it seems that the setEditReply method in the EditReply component is not being called. I expected to see the output from dd($replyId) in the setEditReply method, but there's no response when the button is clicked.
Level 122
is EditReply loaded in the same view?
Level 10
yes it should be in the same view
Level 122
@bogdy > yes it should be in the same view
Sounds like you are not sure
Level 41
I have reread the documentation for events in Livewire 3. Two things.
First, I believe the second parameter in the following statement has to be the event name, not event listener, something like:
<button wire:click="$dispatchTo('EditReply', 'reply-edited', { id: {{ $reply->id }} })"
>Edit Replay</button>
Second, I think we have to register listeners this way:
class EditReply extends Component
{
#[On('reply-edited')]
public function setEditReply($data)
{
$replyId = $data['id'];
dd($replyId);
$this->reply = Reply::findOrFail($replyId);
}
}
Level 122
Your dispatchto should be the javascript name of the component not the PHP name so probably
<button wire:click="$dispatchTo('edit-reply', 'setEditReply', { id: {{ $reply->id }} })"
Also note that above will only work if your id is an integer. Any other type such as uuid will need quoting.
1 like
Level 1
Did you miss
use Livewire\Attributes\On;
at the top of your component?
Level 7
In Livewire 3 isn't the correct syntacs $dispatch('event-name')->to('target') or this is only when used inside a component?
Please or to participate in this conversation.