wire:submit

您是视觉学习者吗？
通过我们深入的屏幕录制掌握 Livewire
立即观看

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

以下是使用 wire:submit 处理“创建帖子”表单提交的基本示例

<?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');
    }
}
<form wire:submit="save"> 
    <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 的更完整的文档