Laravel+Livewire+Alertify.js事件分发：event.detail.text返回undefined

问题核心在于 Livewire 3 的事件参数传递逻辑和之前版本不同，直接传递数组会导致参数结构不符合前端预期，从而出现 undefined。

解决步骤 #

1. 修改 Livewire 组件的事件分发代码

将原来传递数组的写法，替换为命名参数形式（推荐），或者展开数组作为命名参数：

方式一：使用命名参数（更符合 Livewire 3 规范）

// 商品已在收藏夹时
$this->dispatch('message', text: 'Already added to wishlist');

// 收藏夹添加成功时
$this->dispatch('message', text: 'Wishlist updated successfully');

方式二：展开数组作为命名参数

如果需要保留数组形式，可以使用展开运算符将数组转为命名参数：

$this->dispatch('message', ...['text' => 'Already added to wishlist']);

2. 原因说明

Livewire 3 中，$this->dispatch() 的后续参数会被直接解析为 event.detail 的属性。如果直接传递数组，这个数组会被当作序号为 0 的单个参数，此时前端的 event.detail 结构为 {0: {text: 'xxx'}}，自然 event.detail.text 会返回 undefined。

改用命名参数或展开数组后，参数会直接映射到 event.detail 的属性中，event.detail.text 就能正确获取到消息内容。

修改后的完整组件方法代码 #

public function addToWishList($motorId)
{
    if(Auth::check())
    {
        if(Wishlist::where('user_id', Auth::id())->where('motor_id', $motorId)->exists())
        {
            $this->dispatch('message', text: 'Already added to wishlist');
            return false;
        }
        else
        {
            Wishlist::create([
                'user_id' => Auth::id(),
                'motor_id' => $motorId
            ]);
            $this->dispatch('message', text: 'Wishlist updated successfully');
        }
        
    }
    else
    {
        return redirect()->route('login');
    }
}

前端的事件监听代码无需修改，保持原有逻辑即可：

window.addEventListener('message', event => {
    alertify.set('notifier','position', 'top-right');
    alertify.success('hey '+event.detail.text+'!');
});

内容的提问来源于stack exchange，提问作者James Bangde