Livewire: how to disable fetch requests to the server when the model changes?

Question

Every time a field in the model changes, a request is sent to the server with the changes in the component. This is crazy behavior. Why is this done? Why aren't changes being processed on the client side?

Example: user model. I write an email address and when you enter each character, a request is sent to the server. The length of the email address is 24 characters - 24 requests were sent to the server.

How can I disable this?

Answer 1

Every time a field in the model changes, a request is sent to the server with the changes in the component. This is crazy behavior. Why is this done? Why aren't changes being processed on the client side?

This is by design and how Livewire works when you bind an input field with a component property.

How can I disable this?

There are a few options available to you:

1. Increase the debounce value which by default is set to 150ms.

<input type="text" wire:model.debounce.500ms="name">

2. Only send a request to the server once the input elements native change event has been fired (user clicks away).

<input type="text" wire:model.lazy="message">

3. Defer sending the request to the server until such a time where an action is performed to manually trigger a server request:

<input type="text" wire:model.defer="query">
<button wire:click="search">Search</button>