CODEWITHSUNDEEP
laravellaravel-livewirealpine.js
sgb999
sgb999

Reputation: 79

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

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>

Upvotes: 0

Views: 1758

Answers (1)

Markwow
Markwow

Reputation: 181

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>

Upvotes: 2

Related Questions