wire:submit

Livewire 通过 wire:submit 指令轻松处理表单提交。通过将 wire:submit 添加到 <form> 元素，Livewire 将拦截表单提交，防止默认的浏览器处理，并调用任何 Livewire 组件方法。

以下是使用 wire:submit 处理"创建文章"表单提交的基本示例：

php

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Post;

class CreatePost extends Component
{
    public $title = '';

    public $content = '';

    public function save()
    {
        Post::create([
            'title' => $this->title,
            'content' => $this->content,
        ]);

        $this->redirect('/posts');
    }

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

blade

<form wire:submit="save"> <!-- [tl! highlight] -->
    <input type="text" wire:model="title">

    <textarea wire:model="content"></textarea>

    <button type="submit">Save</button>
</form>

在上面的示例中，当用户通过单击"保存"提交表单时，wire:submit 拦截 submit 事件并在服务器上调用 save() 操作。

Livewire 自动调用 preventDefault()

wire:submit 与其他 Livewire 事件处理程序不同，它在内部调用 event.preventDefault()，而无需 .prevent 修饰符。这是因为你监听 submit 事件并且不想阻止其默认浏览器处理（执行完整的表单提交到端点）的实例非常少。

Livewire 在提交时自动禁用表单

默认情况下，当 Livewire 向服务器发送表单提交时，它将禁用表单提交按钮并将所有表单输入标记为 readonly。这样，用户在初始提交完成之前无法再次提交同一表单。

深入了解

wire:submit 只是 Livewire 提供的众多事件监听器之一。以下两个页面提供了在应用程序中使用 wire:submit 的更完整文档：

wire:submit ​

深入了解 ​

wire:submit

深入了解