Dispatch event is not working

I'm having problem with dispatching event from one component to another this is my code:

// views/livewire/component-a.blade.php

<div>
    Button from component A to dispatch an event to component B
    <button wire:click="test">Send</button>
</div>

// app/Http/Livewire/ComponentA.php
<?php

namespace App\Livewire;

use Livewire\Component;

class ComponentA extends Component
{
    public function test()
    {
        $this->dispatch('request-account');
    }
    public function render()
    {
        return view('livewire.component-a');
    }
}

// app/Http/Livewire/ComponentB.php

<?php

namespace App\Livewire;

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

class ComponentB extends Component
{
    #[On('request-account')]
    public function account() {
        dd('hello');
    }
    public function render()
    {
        return view('livewire.component-b');
    }
}

When I click the button to dispatch the event nothing happens! This is a Laravel fresh project with the latest livewire 3 What am I doing wrong I'm out of ideas.. Console is empty and nothing happens on the network tab when I click the button.

Braunson

2 years ago

Level 18

You don't specify how your using the components (i.e. nested or not). I've put your code in an example as non-nested components and things work.

Check it out at this sandbox https://wirebox.app/b/xege2

princevora

2 years ago

Level 1

@Braunson How about the nested components? i have the same issue and i have the nested components

Isolde

1 year ago

Level 1

@princevora I had the same issue, turns out I forgot the "use Livewire\Attributes\On;" so I was using all the other attributes except the "On".... :-(

xalafnasirov

1 year ago

Level 1

You need to specify listeners in Component B because dispatch based on events

<?php

namespace App\Livewire;

use Livewire\Component;

class ComponentA extends Component
{
    public function test()
    {
        $this->dispatch('request-account');
    }
    public function render()
    {
        return view('livewire.component-a');
    }
}

// Second component

<?php

namespace App\Livewire;

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

class ComponentB extends Component
{
    
	protected $listeners = [
		'request-account'=>'account'
		];	

    public function account() {
        dd('hello');
    }
    public function render()
    {
        return view('livewire.component-b');
    }
}

And also both livewires must be added to same page. If there are different page event will not work as you wish instead you will need something like redirecting to pages maybe with controllers to use such a functions

Please or to participate in this conversation.