Livewire表单提交时报Uncaught ReferenceError: $event is not defined如何解决

根因说明 #

该报错和你把代码放在<x-livewire-modal>组件内没有关联，本质是Livewire版本语法差异导致的：

• Livewire v3 已经移除了在wire:开头的服务端事件表达式中自动注入$event变量的支持，只有Alpine.js的执行上下文才能直接访问$event
• 你当前写的wire:submit.prevent="submit(Object.fromEntries(new FormData($event.target)))"属于Livewire服务端方法调用表达式，解析时找不到注入的$event，就会抛出未定义错误

两种修复方案 #

方案1：改用Alpine事件上下文（改动最小，推荐） #

把提交事件绑定改到Alpine的x-on:submit里，通过$wire调用Livewire方法，修改后代码如下：

<form 
  x-on:submit.prevent="$wire.submit(Object.fromEntries(new FormData($event.target)))"
  wire:ref="send-message"
>
   <input type="text" name="message" wire:loading.attr="disabled" wire:target="send-message">
   <button>Send</button>
</form>

方案2：服务端直接取表单数据 #

前端不需要传参，直接简化事件绑定：

<form wire:submit.prevent="submit" wire:ref="send-message">
   <input type="text" name="message" wire:loading.attr="disabled" wire:target="send-message">
   <button>Send</button>
</form>

在对应的Livewire组件的submit方法里直接取请求参数即可：

public function submit()
{
    $message = request('message');
    // 后续业务逻辑
}

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