Laravel livewire不发出事件。

Question

我正在尝试为我的Laravel解决方案中的livewire组件创建一个小的吐司消息调度器，但是事件发射不起作用。

我有这段代码的ToastMessage.php文件

namespace App\Http\Livewire;

use Livewire\Component;

class ToastMessage extends Component
{
    protected $listeners = ['showToast' => 'showToast'];

    public $alertTypeClasses = [
        'success' => ' bg-green-500 text-white',
        'warning' => ' bg-orange-500 text-white', 
        'danger' => ' bg-red-500 text-white', 
    ];

    public $message = 'Notification Message';

    public $alertType = 'success';
    
    public function render()
    {
        return view('livewire.toast');
    }

    public function showToast($message, $alertType)
    {
        $this->message = $message;
        $this->alertType = $alertType;

        $this->dispatchBrowserEvent('toast-message-show');
    }
}

和这个对应的模板

<div class="fixed top-0 right-0 inset-x-0 mb-6 mx-6 px-6 py-5 max-w-sm rounded-lg pointer-events-auto {{ $alertTypeClasses[$alertType] }}"
    x-data="{show:false}" @toast-message-show.window="show = true; setTimeout(() => show=false, 5000);" x-show="show" x-cloak>
    {{ $message }}
</div>

在将一些数据保存在另一个组件中之后，我尝试展示吐司，如下所示：

public function save()
{
    // saving my data, this works

    $this->emit('showToast', 'Your data has been saved', 'success');
}

问题是$this->emit不能工作。我没发现任何错误什么的。我甚至可以添加一些胡言乱语作为排放的参数，它甚至不会崩溃。

我错过了什么。当涉及到调试时，Livewire的文档不够用

Answer 1

你可以做得更简单。创建刀片文件，例如在partials/flash-messages.php中

@if ($message = Session::get('success'))
    <div class="fixed top-0 right-0 inset-x-0 mb-6 mx-6 px-6 py-5 max-w-sm rounded-lg pointer-events-auto bg-green-500 text-white">
    {{ $message }}
</div>
@endif

@if ($message = Session::get('warning'))
    <div class="fixed top-0 right-0 inset-x-0 mb-6 mx-6 px-6 py-5 max-w-sm rounded-lg pointer-events-auto bg-orange-500 text-white">
    {{ $message }}
</div>
@endif

@if ($message = Session::get('danger'))
    <div class="fixed top-0 right-0 inset-x-0 mb-6 mx-6 px-6 py-5 max-w-sm rounded-lg pointer-events-auto bg-red-500 text-white">
    {{ $message }}
</div>
@endif

在您的刀片组件中

@if(session()->has('message'))
   @include('partials.flash-messages')
@endif

在组件中

public function save()
{
   //....
   session()->flash('success', 'This is the message');
}