Laravel Livewire 表单：单击创建按钮时无任何操作

Question

在 Laravel Livewire 中，当我单击表单上的“创建”按钮时没有任何反应。

namespace App\Livewire\Components;

use App\Models\ProjectLists;
use Livewire\Component;
use Livewire\WithFileUploads;
use Illuminate\Support\Facades\Redirect;

class CreateListForm extends Component
{
    use WithFileUploads;

    public $name;
    public $note;
    public $image;
    public $planId;

    public $showForm = false;

    public function toggleForm()
    {
        $this->showForm = !$this->showForm;
    }

    private function resetFields()
    {
        // Alanları sıfırla
        $this->name = '';
        $this->note = '';
        $this->image = '';
    }

    public function create()
    {
        $this->validate([
            'name' => 'required|max:50',
            'note' => 'max:500',
            'image' => 'nullable|image',
            'planId' => 'required|exists:projects,id',
        ], [
            'name.required' => 'List name is required.'
        ]);

        if ($this->image) {
            $newPlan = ProjectLists::create([
                'user_id' => auth()->user()->id,
                'name' => $this->name,
                'note' => $this->note,
                'image' => $this->image->store('images'),
                'project_id' => $this->planId,
            ]);
        } else {
            $newPlan = ProjectLists::create([
                'user_id' => auth()->user()->id,
                'name' => $this->name,
                'note' => $this->note,
                'project_id' => $this->planId,
            ]);
        }

        if ($newPlan) {
            $this->resetFields();
            $this->toggleForm();
        }

        return Redirect::to('/plans');
    }

    public function render()
    {
        return view('livewire.components.create-list-form');
    }
}

这是我的 Livewire 类文件：

<div>
    <button wire:click="toggleForm"
            class="shadow-xl text-xl bg-gray-200 h-14 w-30 pl-4 pr-4 rounded-md text-center font-medium align-middle hover:text-orange-500 hover:shadow-xl focus:text-orange-600 focus:bg-gray-100 transition-all"
            wire:loading.attr="disabled"
            wire:target="toggleForm">
        New List
    </button>

    @if($showForm)
        <form wire:submit.prevent="create" enctype="multipart/form-data">
            @csrf

            <input type="hidden" name="project_id" value="{{ $planId }}">

            <div class="mt-6 p-8 border-2 border-s-2 rounded-md shadow-xl">
                <div class="mt-4">
                    <input type="text"
                           wire:model="name"
                           placeholder="Name"
                           name="name"
                           id="name"
                           class="p-3 placeholder:ml-3 block w-full border-gray-300 rounded-md shadow-sm focus:border-orange-500 focus:ring focus:ring-orange-500 focus:ring-opacity-50 focus:shadow-sm">
                </div>
                <div class="mt-4">
                    <textarea wire:model="note"
                              placeholder="Note"
                              name="note"
                              id="note"
                              class="p-3 placeholder:ml-3 block w-full border-gray-300 rounded-md shadow-sm focus:border-orange-500 focus:ring focus:ring-orange-500 focus:ring-opacity-50 focus:shadow-sm"></textarea>
                </div>
                <div class="mt-4">
                    <input type="file"
                           wire:model="image"
                           name="image"
                           id="image"
                           class="p-3 placeholder:ml-3 block w-full border-gray-300 rounded-md shadow-sm focus:border-orange-500 focus:ring focus:ring-orange-500 focus:ring-opacity-50 focus:shadow-sm">
                </div>
                <div class="mt-4">
                    <button type="submit"
                            wire:loading.attr="disabled"
                            class="px-4 py-2 bg-orange-500 text-white rounded-md shadow-sm hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-50 transition-all">Create</button>
                </div>
            </div>
        </form>
    @endif
</div>

这是 yjr livewire.blade 文件。

Route::middleware('auth')->group(function () {
    Route::get('/plans', [ProjectsController::class, 'index'])->name('projects.index');
    Route::post('/plan/create', [ProjectsController::class, 'create'])->name('projects.create');
    Route::get('/plan/{plan}', [ProjectsController::class, 'show'])->name('projects.show');

    Route::post('plan/{plan}/lists', [CreateListForm::class, 'create'])->name('lists.create');
});

这是我的路线。

除了数据创建之外，一切似乎都很好。当我单击“新列表”按钮时，它会打开一个表单。我填写完毕并单击“创建”按钮，但没有任何反应。没有错误，没有结果，也没有保存任何数据。我不明白发生了什么事。我还是个新手。这里可能有什么问题？

Answer 1

您的验证失败。 在 Livewire 中，当验证失败时，验证后不会运行代码，例如您不能使用

if (validation fails)

语句，因此在刀片文件中显示错误消息并查看验证失败消息。