Laravel 9.28搭配Livewire 2时wire:loading失效问题求助

核心问题根源 #

你的wire:loading指令未生效，是因为当前使用的是普通HTML表单提交，而非Livewire的异步提交机制。Livewire的wire:*指令仅监听自身组件内的异步请求，传统表单提交会直接刷新页面，不会触发Livewire的状态更新。

解决方案：改用Livewire异步提交 #

1. 修改提交按钮组件 #

给加载SVG添加默认隐藏样式，通过wire:loading控制显示/隐藏，同时给按钮添加加载时禁用属性：

<button type="submit" {{ $attributes->merge(['class' => 'btn btn-primary']) }} wire:loading.attr="disabled">
    <!-- 默认隐藏加载动画，提交时显示 -->
    <svg wire:loading class="inline-block" width="40" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#fff">
        <circle cx="15" cy="15" r="15">
            <animate attributeName="r" from="15" to="15"
                     begin="0s" dur="0.8s"
                     values="15;9;15" calcMode="linear"
                     repeatCount="indefinite" />
            <animate attributeName="fill-opacity" from="1" to="1"
                     begin="0s" dur="0.8s"
                     values="1;.5;1" calcMode="linear"
                     repeatCount="indefinite" />
        </circle>
        <circle cx="60" cy="15" r="9" fill-opacity="0.3">
            <animate attributeName="r" from="9" to="9"
                     begin="0s" dur="0.8s"
                     values="9;15;9" calcMode="linear"
                     repeatCount="indefinite" />
            <animate attributeName="fill-opacity" from="0.5" to="0.5"
                     begin="0s" dur="0.8s"
                     values=".5;1;.5" calcMode="linear"
                     repeatCount="indefinite" />
        </circle>
        <circle cx="105" cy="15" r="15">
            <animate attributeName="r" from="15" to="15"
                     begin="0s" dur="0.8s"
                     values="15;9;15" calcMode="linear"
                     repeatCount="indefinite" />
            <animate attributeName="fill-opacity" from="1" to="1"
                     begin="0s" dur="0.8s"
                     values="1;.5;1" calcMode="linear"
                     repeatCount="indefinite" />
        </circle>
    </svg>
    <!-- 加载时隐藏按钮文字 -->
    <span wire:loading.remove>{{ $slot }}</span>
</button>

2. 改造表单为Livewire异步提交 #

将普通表单替换为Livewire的异步提交形式，使用wire:submit.prevent绑定提交方法：

<!-- 在页面中引入Livewire登录组件 -->
@livewire('login')

<!-- 对应组件视图（resources/views/livewire/login.blade.php）代码： -->
<form wire:submit.prevent="login">
    <div class="row g-3">
        <div class="col-12">
            <input type="email" wire:model="email" class="form-control" placeholder="Email">
            @error('email') <span class="text-danger">{{ $message }}</span> @enderror
        </div>
        <div class="col-12">
            <input type="password" wire:model="password" class="form-control" placeholder="Password">
            @error('password') <span class="text-danger">{{ $message }}</span> @enderror
        </div>
        <div class="col-12">
            <x-submitbutton>Login</x-submitbutton>
        </div>
    </div>
</form>

3. 编写Livewire组件逻辑 #

创建app/Http/Livewire/Login.php组件，处理登录逻辑：

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Auth;

class Login extends Component
{
    public $email = '';
    public $password = '';

    public function login()
    {
        $this->validate([
            'email' => 'required|email',
            'password' => 'required',
        ]);

        if (Auth::attempt(['email' => $this->email, 'password' => $this->password])) {
            return redirect()->intended('/dashboard');
        }

        $this->addError('email', 'Invalid email or password');
    }

    public function render()
    {
        return view('livewire.login');
    }
}

Laravel 9.28与Livewire 2兼容性确认 #

Laravel 9.28完全兼容Livewire 2.x版本，Livewire官方文档明确标注2.x支持Laravel 7.x至9.x，因此版本不是导致问题的原因。

额外排查点 #

• 确认Livewire组件已通过自动发现机制加载（默认无需手动注册）
• 确保页面<head>内引入@livewireStyles，<body>末尾引入@livewireScripts
• 检查浏览器控制台是否有JS报错（你提到无报错，可跳过）

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