将事件从子组件调度到父组件Livewire v3

Question

我正在使用 Laravel Blade 和 Livewire 版本 3。

我有一个文件，其中显示了我的所有记录，例如我的所有俱乐部：

    <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>

在下面的部分中，我将其称为我的子组件：

<livewire:club.create />

在这部分子组件中，我有一个用于创建新实体的按钮：

<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>

我的父控制器看起来像这样：

<?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');
    }
}

我的子控制器是这样的：

<?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']);
    }
}

我希望在创建实体时创建事件“recordAdded”，该事件在父组件上知道显示横幅消息，如添加记录。

但是使用这样的代码我得到： 事件 recordAdded 的处理程序不存在

Answer 1

您的问题是您同时拥有一个名为

showSuccessBanner

的方法和属性。由于 Livewire 内部的工作原理，这会导致不易发现的问题。

只需重命名其中之一，例如方法名称，

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