How requests work to synchronize properties and events in Laravel Livewire
Now we will learn in detail how Livewire works; how it is possible for both sides (client and server) to communicate in a "direct" way through events in Livewire.
For this example temporarily place in your category form
<label for="">Title</label>
<input type="text" wire:model.live='title'>With which every time we write and not only when we use an event the state of the title property will be updated
For this we are going to use the web developer console of the browser and place it in the Network section
Now we are going to work on the Savephp component and we are going to write slowly in any of the wiremodel text fields and we will see
If you correctly performed the slow typing exercise, you'll notice that a request is executed for each letter you type. These requests represent how Livewire keeps the properties defined in the component's class synchronized with the form fields that use the wire:model directive.
In other words, every time the user modifies a field on the client, Livewire sends a request to the server to update the corresponding value in the component's property. This is the basis of Livewire's responsiveness: maintaining an up-to-date relationship between the client and server through small, automatic requests.
The exact behavior—whether the requests occur for each letter, when the focus is lost, or only when Enter is pressed—depends on the type of directive being used (wire:model, wire:model.lazy, wire:model.debounce, etc.).
All these variations work thanks to the @livewireScripts decorator, which must be included whenever you want to use Livewire. This decorator loads the main Livewire script into the frontend and manages this synchronization system and controls client-to-server requests.
This decorator, along with the one from @livewireStyles, is defined by default in the layout of layout/app.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
***
@livewireStyles
***
@livewireScripts
</body>
</html>To test this remove the script decorator and try using any Livewire directive for example the submit one and you will see that it no longer works
The livewireScripts decorator allows you to initialize all scripts to allow working with Livewire from the client side and this includes sending wiremodel updates click events submits etc The livewireScripts renders something like
<script data-turbo-eval="false" data-turbolinks-eval="false" >
if (window.livewire) {
console.warn('Livewire: It looks like Livewire\'s @livewireScripts JavaScript assets have already been loaded. Make sure you aren\'t loading them twice.')
}
window.livewire = new Livewire();
window.livewire.devTools(true);
// ***
</script>It is important to note that with Livewire enabled you can use the wiremodel as if it were a reactive property in Vue we make this statement as a way to understand how Livewire works although it is important to clarify that Livewire is not reactive that is through the title property if we define it in the component view
<div>
<form wire:submit.prevent="submit">
<label for="">Título</label>
<h3 class="text-xl">***{{$title}}***</h3>
<input type="text" wire:model="title">
<label for="">Texto</label>
<input type="text" wire:model="text">
<button type="submit">Enviar</button>
</form>
</div>Youll see when you write something in the wiremodel
The content is reflected and in this way you can understand the basic operation of Livewire to keep the properties updated this automatic update feature that is every time we wrote in a field it was updated on the server based on a request was how Livewire worked until version 2 in version 3 this function was deactivated by default when too many unnecessary requests were made to the server since in most cases we are going to want to update the attributes when some event occurs such as a click or a form submission.
Next step, implement Integration or Unit tests in Laravel Livewire.
I agree to receive announcements of interest about this Blog.
We will do some tests from Livewire by sending requests at the time of writing in a wire:model and the events and looking at the network tab of the browser.