Laravel Livewire中Toaster Notification无法显示消息问题

通知可正常弹出，但无法显示消息内容，效果如下：

提供的代码 #

Livewire 类代码 #

public function addToCart($id)
{
    $this->dispatch('success', ['message' => 'Item Added Your Cart']);
}

母版文件 JS 代码 #

<script>
        $(document).ready(function() {
            toastr.options = {
                "progressBar": true,
                "positionClass": "toast-top-right",
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "3000",
                "extendedTimeOut": "1000",
            }
        });

        window.addEventListener('success', event => {
            toastr.success(event.detail.message);
        });

        window.addEventListener('warning', event => {
            toastr.warning(event.detail.message);
        });

        window.addEventListener('error', event => {
            toastr.error(event.detail.message);
        });
    </script>

修复方案 #

问题出在 Livewire 事件的参数传递格式上，按以下方式修改 Livewire 代码即可：

方式一（推荐，Livewire 3 新语法） #

public function addToCart($id)
{
    $this->dispatch('success', message: 'Item Added To Your Cart');
}

方式二（数组格式兼容写法） #

public function addToCart($id)
{
    $this->dispatch('success', ['message' => 'Item Added To Your Cart'])->toOthers();
}

另外注意原消息文本 Item Added Your Cart 存在语法问题，建议修正为 Item Added To Your Cart。

原理：Livewire 中直接传递数组参数时，若未指定接收目标，参数可能无法正确挂载到 event.detail 层级。使用键值对语法或添加 ->toOthers() 方法，能确保参数被正确解析，JS 端就能正常获取 event.detail.message 并显示。

内容的提问来源于stack exchange，提问作者Md. Shiam Hossain