如何检测Livewire表单中触发提交的按钮？

问题场景 #

现有Livewire表单代码如下：

<form wire:submit="submitLivewireForm(globalPageType)">
    <input 
        id="product-name"
        name="product-name"
        type="text"
        wire:model="productName">

    <!-- 更多带双向绑定的单行和多行表单元素 -->

    <button id="action-generate-titles">
        Generate titles
    </button>
</form>

表单原本运行正常，wire:submit会阻止页面刷新并调用后端方法。现在需要添加多个提交按钮，尝试了命名提交按钮：

<input type="submit"
    name="action"
    value="Foo" />

希望通过Illuminate\Http\Request获取按钮的name属性，但无法实现；考虑过用wire:model绑定按钮状态，但不符合UX架构；移除wire:submit给按钮加wire:click时，会触发页面刷新导致数据丢失。

标准解决方法 #

方法1：给按钮指定type="button"并通过wire:click传递操作标识 #

这是最直观的方式，彻底避免按钮触发默认表单提交：

<form>
    <input 
        id="product-name"
        name="product-name"
        type="text"
        wire:model="productName">

    <!-- 其他表单元素 -->

    <!-- 生成标题按钮 -->
    <button type="button" id="action-generate-titles" wire:click="handleAction('generate-titles', globalPageType)">
        Generate titles
    </button>

    <!-- Foo操作按钮 -->
    <button type="button" wire:click="handleAction('foo', globalPageType)">
        Foo
    </button>
</form>

后端组件中实现对应方法：

public function handleAction(string $action, ?string $pageType): void
{
    // 根据操作标识区分处理逻辑
    match($action) {
        'generate-titles' => $this->generateTitles($pageType),
        'foo' => $this->handleFooAction($pageType),
        // 扩展其他操作分支
    };
}

private function generateTitles(?string $pageType)
{
    // 生成标题的业务逻辑
}

private function handleFooAction(?string $pageType)
{
    // Foo操作的业务逻辑
}

核心点：给按钮设置type="button"，切断默认表单提交行为，通过wire:click直接传递操作类型参数，无需依赖Request获取按钮信息。

方法2：保留wire:submit，通过$event.submitter获取提交按钮信息 #

如果想保留表单的wire:submit机制，可以利用Livewire的$event对象直接获取提交按钮的属性：

<form wire:submit="submitLivewireForm(globalPageType, $event.submitter.value)">
    <input 
        id="product-name"
        name="product-name"
        type="text"
        wire:model="productName">

    <!-- 其他表单元素 -->

    <button type="submit" value="generate-titles" id="action-generate-titles">
        Generate titles
    </button>

    <input type="submit" name="action" value="Foo" />
</form>

后端组件方法接收按钮的value作为区分参数：

public function submitLivewireForm(?string $pageType, string $action): void
{
    // 根据按钮value区分处理逻辑
    if ($action === 'generate-titles') {
        // 生成标题逻辑
    } elseif ($action === 'Foo') {
        // Foo操作逻辑
    }
}

说明：$event.submitter可以获取到触发提交的DOM按钮元素，你可以根据需求读取value、name等属性，比如$event.submitter.name。

原方法失效原因 #

Livewire的表单提交基于AJAX异步请求，并非传统的表单POST提交，因此Illuminate\Http\Request无法直接获取到提交按钮的name/value——这些信息不会被自动包含在Livewire的请求载荷中，必须通过显式参数传递告知后端。

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