Laravel Livewire中POST请求提交无反应且无报错如何解决

问题原因 #

• 公共属性$post未初始化，Livewire无法绑定嵌套的post.title、post.body属性值
• 验证规则与实际绑定的属性路径不匹配：表单绑定的是post下的子属性，但规则写的是根层级的title、body，验证始终不通过
• 取值逻辑与属性绑定不匹配：createPost方法中直接取$this->title、$this->body，这两个属性根本不存在，无法正常取值
• 表单未添加错误提示，验证失败后看不到报错信息，误以为点击无反应

修复步骤 #

1. 修改Livewire组件代码 #

把你的PostCreate组件代码调整为以下内容：

<?php

namespace App\Http\Livewire;

use App\Models\Post;
use Livewire\Component;
use Illuminate\Http\Response;

class PostCreate extends Component
{
    // 初始化post属性为数组，声明默认子字段
    public $post = [
        'title' => '',
        'body' => ''
    ];
    public $points = 10;
    public $energy = 1;

    public function increment()
    {
        $this->points++;
    }

    // 验证规则改成匹配post下的子属性
    protected $rules = [
        'post.title' => 'required|min:4',
        'post.body' => 'required|min:4',
    ];

    public function createPost()
    {
        if (auth()->check()) {
            // 按规则验证
            $this->validate();

            $post = Post::create([
                'user_id' => auth()->user()->id,
                // 从post属性中取值
                'body' => $this->post['body'],
                'title' => $this->post['title'],
            ]);

            $user = auth()->user();
            $user->increment('points', 10);

            session()->flash('success_message', 'Post was added successfully!');

            $this->reset('post');

            return redirect()->route('posts.index');
        }
    }

    public function render()
    {
        return view('livewire.post-create');
    }
}

2. 给表单添加错误提示（可选但建议） #

可以在对应输入框下方加上错误提示，方便后续排查问题：

<!-- 标题输入框下方加 -->
@error('post.title') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror

<!-- 内容输入框下方加 -->
@error('post.body') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror

排查小技巧 #

如果后续再遇到Livewire提交无反应的情况，可以打开浏览器控制台的「网络」标签，过滤livewire/update请求，查看响应内容就能直接看到报错信息，比盲改效率高很多。

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