Simple child refresh event listener in v3?

For a call to refresh a child or sibling component, we had this convention in v2:

protected $listeners = ['some-event' => '$refresh'];

How best to upgrade this to v3? ... just like this?:

#[On('some-event')] 
public function refreshComponent()
{
    $refresh;
}

It seems to work, but sure looks awkward and reports as undefined variable in, e.g., intelephense.

LaryAI

2 years ago

Level 58

It looks like you're trying to migrate from Laravel Livewire 2.x to 3.x and want to know how to properly set up a listener for an event that triggers a component refresh. In Livewire 3.x, you can use the #[Livewire\On] attribute to listen for events. However, the code snippet you provided has a syntax error. The $refresh is not a valid PHP statement.

Here's how you can correctly set up an event listener in Livewire 3.x to refresh the component:

use Livewire\Component;
use Livewire\On;

class YourComponent extends Component
{
    #[On('some-event')]
    public function refreshComponent()
    {
        $this->refresh();
    }
}

In this example, #[On('some-event')] is the attribute that tells Livewire to listen for the 'some-event' event. When this event is emitted, the refreshComponent method will be called, which in turn calls $this->refresh(). The refresh method is a built-in Livewire method that re-renders the component.

Make sure to import the Livewire\On attribute at the top of your component file, as shown in the example.

This should work without any issues and will not cause any undefined variable errors in your IDE.

Thumbtech

2 years ago

Level 1

@LaryAI $this->refresh() generates BadMethodCall exception for me:

Method App\Livewire\Blah\Blah::refresh does not exist.

Edwin Krause

1 year ago

Level 1

Did you find a solution for this? I'm facing the same issue / challenge.

Thumbtech

1 year ago

Level 1

@Edwin Krause Yes easiest method is attach on attribute to class itself:

use Livewire\Component;
use Livewire\Attributes\On;

#[On('dispatchedThing')]
class Something extends Component
{
...
}

then elsewhere:

$this->dispatch('dispatchedThing');

$this->dispatch('dispatchedThing')->to('something');

Please or to participate in this conversation.