Dispatch event from child component to parent component Livewire v3

Question

I am using Laravel Blade with Livewire version 3.

I have a file where a show all my record, for this example all my clubs:

    <div class="container mx-auto px-4 py-5 dark:text-white">
    <div class="flex justify-between items-center">
        <h1 class="text-xl font-bold">Clubs Directory</h1>
    </div>
    <p class="mb-5">Here you can manage the clubs: Add new clubs, edit existing ones, or remove them from the list.</p>
    @if ($showSuccessBanner)
        <!-- Show success banner here -->
        <p>Record Added</p>
    @endif
    <livewire:club.create />
    <table class="w-full table-auto rounded-sm bg-gray-300 dark:bg-gray-700 transition duration-500">
        <thead>
            <tr>
                <th class="px-4 py-2 text-center">ID</th>
                <th class="px-4 py-2 text-center">Name</th>
                <th class="px-4 py-2 text-center">City</th>
                <th class="px-4 py-2 text-center">Actions</th>
            </tr>
        </thead>
        <tbody id="clubList" class="text-center">
            @foreach($clubs as $club)
            <tr class="bg-gray-600">
                <td class="border px-4 py-2">{{ $club['id'] }}</td>
                <td class="border px-4 py-2">{{ $club['name'] }}</td>
                <td class="border px-4 py-2">{{ $club['city'] }}</td>
                <td class="border px-4 py-2">
                    <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-1 px-2 rounded">Edit</button>
                    <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded">Delete</button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

In part below I call my child component:

<livewire:club.create />

In this part child component I have a button to create a new entity:

<div>
    <input wire:model="name" type="text" placeholder="Club Name" class="form-input dark:text-black">
    @error('name') <span class="text-red-500">{{ $message }}</span> @enderror

    <input wire:model="city" type="text" placeholder="City" class="form-input mt-2 dark:text-black">
    @error('city') <span class="text-red-500">{{ $message }}</span> @enderror

    <button wire:click="createClub" class="bg-gradient-to-r from-blue-500 to-green-500 hover:from-blue-700 hover:to-green-700 text-white font-bold py-2 px-4 rounded mb-5 shadow-md">Add Club</button>
</div>

My parent controller look like this:

<?php

namespace App\Livewire\Club;

use Livewire\Component;
use Livewire\Attributes\On;
use App\Models\Club as Clubs;
use Illuminate\Support\Facades\Log;

class Index extends Component
{
    public $showSuccessBanner;
    public $clubs;

    public function mount(){
        $this->clubs = Clubs::all();
    }
    
    #[On('recordAdded')]
    public function showSuccessBanner()
    {
        Log::info('it is listening');
        $this->showSuccessBanner = true;
        $this->clubs = Clubs::all();
    }

    public function render()
    {        
        return view('livewire.club.index');
    }
}

And my child controller like this:

<?php

namespace App\Livewire\Club;

use Livewire\Component;
use App\Models\Club as Clubs;

class Create extends Component
{
    public $name;
    public $city;

    public function render()
    {
        return view('livewire.club.create');
    }

    public function createClub()
    {
        $this->validate([
            'name' => 'required|string',
            'city' => 'required|string',
        ]);

        Clubs::create([
            'name' => $this->name,
            'city' => $this->city,
        ]);

        $this->dispatch('recordAdded');

        // Reset input fields after club creation
        $this->reset(['name', 'city']);
    }
}

I want when entity is created to create event "recordAdded" which on parent component knows to show banner message like Record added.

But with code like this I get: Handler for event recordAdded does not exist

Everything would seem fine, is there any other code you're not showing? — TUPKAP
– TUPKAP, Commented Apr 1, 2024 at 21:56
Have to side with @Pippo here; dispatching from child components in the format you've given should work just fine. — Yinci
– Yinci, Commented Apr 4, 2024 at 5:58

Qirel · Accepted Answer · 2024-04-02 05:09:09Z

0

Your problem is that you have both a method and a property named showSuccessBanner. Because of how Livewire internally works, that would cause problems which isn't easy to discover.

Simply rename one or the other, for example the method name,

#[On('recordAdded')] 
public function setShowSuccessBanner() 
{ 
    Log::info('it is listening'); 
    $this->showSuccessBanner = true; 
    $this->clubs = Clubs::all(); 
}

answered Apr 2, 2024 at 5:09

Qirel

26.6k7 gold badges54 silver badges71 bronze badges

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

1 Comment

TUPKAP Over a year ago

Although it seems like the most obvious problem (and it is better to make the change at least for clarity) the code as it has been exposed works perfectly, the homonymy of attribute and method is managed regularly (I have tested it)

Collectives™ on Stack Overflow

Dispatch event from child component to parent component Livewire v3

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related