Laravel Livewire - 我应该费心使用表格吗？

Question

我的 Livewire 组件如下所示。很简单：

class StartLw extends Component
{
    public $count;

    public function mount() {
        $this->count = 0;
    }

    public function formSubmit() {
        $this->count++;
    }

    public function relatedToButSeparateFromForm() {
        $this->count++;
    }
}

然后我的 HTML 页面上有一个 <form>，Livewire 阻止默认提交，将其重定向到组件函数。请注意，在表单内有通常的 "submit" 按钮和一个辅助按钮（它在功能上与表单相关，但在技术上与提交表单分开）。

在我看来，这个辅助按钮只是一个 HTML 对象，并且（可能是错误的）因为它没有被声明为 "submit" 类型，我看不出它应该尝试的理由提交表单比点击复选框更重要。

<div class="container">

    <div class="row">
        <div class="col"><p>{{ $count }}</p></div>
    </div>

    <div class="row">
        <div class="col">
            <form method="post" wire:submit.prevent="formSubmit">
                <button type="submit">Submit Min Form</button>&nbsp;
                <button wire:click="relatedToButSeparateFromForm">Lookup something related to form</button>
            </form>
        </div>
    </div>
</div>

当我按下主表单提交按钮时，屏幕计数器 => 增加 1
当我按下辅助（查找）按钮时，计数器 => 增加 2

换句话说，辅助按钮执行它在 wire:click="" 属性中指定的功能，还执行表单提交功能。在我的实际应用程序中，这种行为让我很头疼。

我正在考虑的一个选项是完全取消 <form> 元素，只允许按钮彼此独立工作（每个按钮执行自己的 wire:click="" 功能）。使用此选项和一些 wire:model 属性，我想我可以完成这项工作。然而，删除 <form> 标签感觉就像是在打破 HTML 的哲学，我不禁认为像 Livewire 这样的技术应该与 HTML 这样的成熟技术集成，不改变它需要的结构方式。

想知道其他人是如何解决这个问题的吗？

Answer 1

建议为所有按钮指定一个type。浏览器将没有 type 的 button 视为已用 type="submit" 指定（即默认为表单提交）是很常见的。

在辅助按钮上定义 type="button"，应该没问题。

Answer 2

对于以后遇到这个问题的人来说，正确的做法是将按钮声明为按钮！请参阅@Peppermintology 的回答。

我发现的另一种可能的解决方案是将 prevent 修饰符也添加到第二个按钮：

<button wire:click.prevent="relatedToButSeparateFromForm">Click Me</button>

Laravel Livewire - 我应该费心使用表格吗？

Laravel Livewire - should I bother using forms at all?

laravel-livewire