如何在使用alpine.js时阻止livewire更新输入

Question

所以我使用livewire和alpine.js，在填写输入框时，我试图阻止客户机与服务器的大量联系(我已经知道您可以使用像.lazy这样的方法来等待x段时间)，我尝试过使用alpine.js，但即使这样，它也会针对每次击键更新服务器，有什么方法可以防止这种情况，所以它只会在论坛上提交吗？谢谢

<div x-data>
<form x-on:submit.prevent="$wire.post()">
    <label for="title">Post Title</label>
    <input id="title" type="text" class="form-control" x-model="$wire.title" />
    <label for="content">Post Content</label>
    <textarea id="content"  class="form-control" rows="4" x-model="$wire.content" required></textarea>
    <button class="btn btn-primary" type="submit">Post</button>
</form>

Answer 1

我认为您正在寻找"wire:model.defer“或添加".defer”在您的alpinejs -这将等待执行一个动作来调用服务器。这将避免每次键入密钥时都调用服务器。

他们在AlpineJS文档中使用的示例是：

<div x-data="{ open: @entangle('showDropdown').defer }">

这将不会被发送到服务器，直到另一个livewire按钮被按下页面，它将被发送与该调用。

如果您只想在这里使用Livewire，您可以这样做：

<form>
    <label for="title">Post Title</label>
    <input id="title" type="text" class="form-control" wire:model.defer="title" />
    <label for="content">Post Content</label>
    <textarea id="content"  class="form-control" rows="4" wire:model.defer="content" required></textarea>
    <button wire:click.prevent="post()" class="btn btn-primary" type="button">Post</button>
</form>