Livewire 表单必须用 wire:submit.prevent="save" 接管提交,绑定字段需严格匹配 public 属性,验证须显式调用 $this->validate() 或 #[Validate],成功提示用 flash() 而非 JS alert。

wire:submit.prevent 没加对,表单就不是 Livewire 表单——它会直接走原生 HTML 提交,跳转、刷新、丢失状态,所有 Livewire 能力全部失效。
表单提交必须用 wire:submit.prevent
这是 Livewire 接管表单的唯一入口。漏掉 .prevent,或拼成 preven、prevente,都会导致页面跳转。
-
wire:submit.prevent="save"中的save必须是组件里定义的 public 方法名,大小写敏感 - 不要在该方法里写
return redirect(...)或return view(...)——Livewire 自己控制渲染,你只负责副作用(比如存数据库、改属性) - 如果提交后 Network 面板没看到
X-Livewire请求头,基本就是.prevent失效了,先检查拼写和点号
wire:model 字段必须与 public 属性严格对应
每个要双向同步的输入字段,都得带 wire:model,且绑定的变量名必须和组件类里的 public 属性名完全一致。
-
<input wire:model="title">要求组件中存在public $title = ''; - 不支持嵌套属性如
wire:model="post.title"(除非你手动实现__get/__set) - textarea、select、checkbox、radio 全部适用,但 checkbox 需注意布尔值处理:默认空字符串,建议初始化为
false
验证失败时页面不报错?检查 $this->validate() 调用位置
Livewire 不自动触发验证,必须显式调用 $this->validate() 或使用 #[Validate] 属性。
- 用
rules()方法时,$this->validate()要放在save()里靠前位置,否则验证前就已存库 - 用
#[Validate]属性时,字段级规则更直观,但无法做跨字段逻辑(如“password_confirmation 必须等于 password”) - 验证失败后,Livewire 会自动把错误信息注入
$errors,Blade 中用@error('title')...渲染
提交成功后需要提示?别用 JS alert,用 flash()
Livewire 自带的 flash 机制能跨重渲染保留消息,比 session()->flash() 更轻量、更契合组件生命周期。
- 在
save()方法末尾加flash('保存成功!')->success(); - 视图中放
<x-livewire-flash></x-livewire-flash>组件(需确保已发布并注册该 Blade 组件) - 避免在同一个请求中多次调用
flash(),后一次会覆盖前一次
最容易被忽略的是:Livewire 表单不是“增强版 HTML 表单”,而是一套独立的数据流闭环——从 wire:submit.prevent 开始拦截,到 wire:model 维持状态,再到 $this->validate() 和 flash() 完成反馈,任意一环断开,整个流程就退化成传统跳转。调试时优先盯死这三处。


















