Laravel Livewire表单wire:submit.prevent失效问题求助

核心原因 #

你当前的register.blade.php只是普通的Blade视图片段（通过@yield('content')插入布局），并没有被Livewire组件上下文包裹。wire:submit.prevent是Livewire专属指令，必须在Livewire组件的渲染环境中才能被识别并绑定拦截提交的逻辑，否则表单会触发默认的浏览器提交行为导致页面刷新。

之前用@livewire('register')有效，是因为这直接渲染了完整的Livewire组件，自带上下文，但全局放在布局里会导致所有页面都显示注册组件。

解决方案 #

步骤1：确保注册页绑定Livewire组件 #

1. 若未创建对应Livewire组件，先执行命令生成：

php artisan make:livewire Register

这会生成app/Http/Livewire/Register.php组件类和resources/views/livewire/register.blade.php视图文件。

2. 将register.blade.php中的表单内容完整复制到resources/views/livewire/register.blade.php中，去掉原有的@section('content')和@endsection包裹。

3. 在Register.php组件类中指定使用app布局，并编写提交逻辑：

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\User;

class Register extends Component
{
    public $form = [
        'name' => '',
        'email' => '',
        'password' => '',
        'password_confirmation' => '',
    ];

    public function submit()
    {
        // 表单验证
        $this->validate([
            'form.name' => 'required|string|max:255',
            'form.email' => 'required|email|unique:users',
            'form.password' => 'required|string|min:8|confirmed',
        ]);

        // 创建用户逻辑
        User::create([
            'name' => $this->form['name'],
            'email' => $this->form['email'],
            'password' => bcrypt($this->form['password']),
        ]);

        // 注册成功后的跳转或提示
        return redirect()->route('login');
    }

    public function render()
    {
        return view('livewire.register')->layout('app');
    }
}

4. 修改路由，让/register指向这个Livewire组件：

// routes/web.php
use App\Http\Livewire\Register;

Route::get('/register', Register::class)->name('register');

步骤2：修正Livewire脚本加载位置 #

你的app.blade.php中@livewireScripts放在了<head>标签里，这会导致Livewire在DOM未完全加载时尝试绑定元素，可能引发异常。需要把它移到<body>末尾、Turbo脚本之前：

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    @livewireStyles
    <script src="{{asset('js/app.js')}}"></script>
</head>
<body class="flex flex-wrap justify-center bg-blue-100">
    <div class="flex w-full justify-between px-4 bg-purple-900 text-white">
        <a class="mx-3 py-4" href="/">Home</a>
        <div class="py-4">
            <a class="mx-3" href="/login">Login</a>
            <a class="mx-3" href="/register">Register</a>
        </div>
    </div>
    <div class="my-10 w-full flex justify-center">
        @yield('content')
    </div>

    @livewireScripts
    <script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks@v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false"></script>
    <script type="module">
        import hotwiredTurbo from 'https://cdn.skypack.dev/@hotwired/turbo';
    </script>
</body>
</html>

替代方案（保留原路由返回视图的方式） #

如果希望维持原路由返回视图的逻辑，可以在register.blade.php的@section('content')中直接调用Livewire组件：

@section('content')
<div class="my-10 flex justify-center w-full">
    <section class="border rounded shadow-lg p-4 w-6/12 bg-gray-200">
        <h1 class="text-center text-3xl my-5">SignUp to Get Started</h1>
        <hr>
        @livewire('register')
    </section>
</div>
@endsection

此时需确保livewire/register.blade.php仅包含表单内容，组件类中无需指定布局（已通过父视图使用app布局）。

验证 #

完成上述修改后，访问/register提交表单，会触发Livewire的submit方法，页面不再刷新，且注册组件仅在注册页显示。

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