Laravel Livewire问题：无法创建数据库记录求助

学习Livewire开发新闻站点时，新闻分类展示功能正常，但创建分类的表单提交后页面刷新，数据库无新增记录，甚至测试die($this->name)也无任何反应。

相关代码片段 #

web.php #

Route::group(['prefix' => 'admin', 'as' => 'admin.'], function () {

    Route::get('/newsCategories/show', ShowNewsCategories::class)
        ->name('news.categories.show');
    Route::get('/newsCategories/create', CreateNewsCategory::class)
        ->name('news.categories.create');
});

CreateNewsCategory.php (app/Http/Livewire/Admin/NewsCategories/CreateNewsCategory.php) #

<?php

namespace App\Http\Livewire\Admin\NewsCategories;

use App\Models\NewsCategory;
use Illuminate\Contracts\Foundation\Application;
use Illuminate\Contracts\View\Factory;
use Illuminate\Contracts\View\View;
use Livewire\Component;

class CreateNewsCategory extends Component
{
    public $name;
    public $order;

    protected $rules = [
        'name' => 'required|string|max:220',
        'order' => 'required'
    ];

    public function create(){
        $this->validate();

        NewsCategory::create([
            'name' => $this->name,
            'order' => $this->order,
        ]);
    }

    /**
     * @return Factory|View|Application
     */
    public function render()
    {
        return view('livewire.admin.news-categories.create-news-category')
            ->extends('layouts.admin.master')
            ->section('content');
    }
}

/resources/views/livewire/admin/news-categories/create-news-category.blade.php #

<form wire:submit.prevent="create">
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" placeholder="Enter name" wire:model="name">
    </div>

    <div class="form-group">
        <label for="order">Order</label>
        <input type="text" class="form-control" id="order" placeholder="Enter order" wire:model="order">
    </div>

    <button type="submit" class="btn btn-primary" wire:click="create">Create</button>
</form>

NewsCategory.php (/app/Models/NewsCategory.php) #

<?php

namespace App\Models;

use Carbon\Carbon;
use Cviebrock\EloquentSluggable\Sluggable;
use Illuminate\Database\Eloquent\Collection;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;
use Illuminate\Database\Eloquent\SoftDeletes;


class NewsCategory extends Model
{
    use Sluggable;
    use SoftDeletes;

    protected $table = 'news_categories';

    protected $casts = [
        'order' => 'int'
    ];

    protected $fillable = [
        'order',
        'name',
        'slug'
    ];

    public function articles(): HasMany
    {
        return $this->hasMany(Article::class);
    }

    public function sluggable(): array
    {
        return [
            'slug' => [
                'source' => 'name'
            ]
        ];
    }
}

问题原因与解决方法 #

核心问题：表单提交事件冲突 #

表单同时设置了wire:submit.prevent="create"和提交按钮的wire:click="create"，这会导致浏览器默认的表单刷新行为优先触发，Livewire的AJAX请求无法正常执行，所以页面刷新但无任何逻辑执行。

修复步骤 #

1. 修改表单视图，移除按钮上的wire:click
   保留form标签的wire:submit.prevent="create"即可，它会在表单提交时触发指定方法，同时阻止默认刷新：

   <form wire:submit.prevent="create">
       <div class="form-group">
           <label for="name">Name</label>
           <input type="text" class="form-control" id="name" placeholder="Enter name" wire:model="name">
           @error('name') <span class="text-danger">{{ $message }}</span> @enderror
       </div>
   
       <div class="form-group">
           <label for="order">Order</label>
           <!-- 把type改为number，更符合字段类型 -->
           <input type="number" class="form-control" id="order" placeholder="Enter order" wire:model="order">
           @error('order') <span class="text-danger">{{ $message }}</span> @enderror
       </div>
   
       <button type="submit" class="btn btn-primary">Create</button>
   </form>
   

2. 优化验证规则，匹配字段类型
   模型中order被转为int类型，因此组件的验证规则需要加上integer，避免提交非整数导致的隐性错误：

   protected $rules = [
       'name' => 'required|string|max:220',
       'order' => 'required|integer'
   ];
   

3. 增强逻辑体验（可选）
   在create方法中添加成功提示和跳转，让操作反馈更清晰：

   public function create(){
       $validated = $this->validate();
   
       NewsCategory::create($validated);
   
       session()->flash('message', '新闻分类创建成功！');
       return redirect()->route('admin.news.categories.show');
   }
   

4. 确认Livewire依赖引入
   确保主布局layouts.admin.master中正确引入Livewire的样式和脚本：

   • 在HTML头部添加：@livewireStyles
   • 在HTML底部（</body>前）添加：@livewireScripts

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