How to stop livewire from updating input when using alpine.js

Question

So i'm using livewire and alpine.js, I am trying to stop the client from contacting the server so much when filling in input boxes (i already know you can use methonds like .lazy to wait for x amount of time), i have tried to use alpine.js but even then it will update the server for every keystroke, is there a way to prevent this so it will only do it forum submit? thanks

<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>

Markwow · Accepted Answer · 2022-05-15 19:32:05Z

2

I think you are looking for "wire:model.defer" or adding ".defer" in your alpinejs this is going to wait until an action is performed to call the server. This will save you from making a call to the server every time a key is typed.

The example they use in the AlpineJS documentation is:

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

This wont get sent to the server until another livewire button is pressed on the page and it will get sent with that call.

If you wanted to just use Livewire here you could do this:

<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>

edited May 15, 2022 at 19:32

answered May 15, 2022 at 19:25

Markwow

1811 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to stop livewire from updating input when using alpine.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related