Laravel Livewire: Evento enter de teclado wire:keydown.enter
La siguiente implementación que tenemos que realizar consiste en que al momento de cambiar las cantidades en el INPUT, también cambiarlas en el ítem del carrito asociado; para ello, emplearemos el evento de enter implementado de la siguiente manera:
resources/views/livewire/shop/cart-item.blade.php
<div>
<div class="box mb-3">
@if ($item)
<p>
<input wire:keydown.enter='add({{ $item }},$wire.count)' wire:model='count' class="w-20"
type="number">
{{ $item->title }}
</p>
@endif
</div>
</div>Como puedes apreciar en el código anterior, se invoca el mismo método de add() empleado no solo para agregar, sino, también para actualizar y eliminar; para las cantidades, se emplea mediante el objeto de JavaScript de Livewire $wire.count en vez de:
<input wire:keydown.enter='add({{ $item }},{{ $count }})'Ya que, el cambio al ocurrir en el cliente, no se a actualizado aun en el servidor, manteniendo el valor anterior e imposibilitando la actualización de la cantidad en el item; el valor a actualizar, se encuentra en el cliente, y para obtenerlo, podemos emplear el JavaScript de Livewire como mostramos anteriormente; puedes colocar una impresión en el método y evaluar lo comentado anteriormente:
app/Livewire/Shop/CartItem.php
#[On('addItemToCart')]
function add(Post $post, int $count = 1) {
dd($count);
***
}El problema es la condición de carrera, se actualiza en el servidor y ese viene siendo el problema pudieras considerar aquí colocar un Live Pero entonces aquí tuvieras una condición de carrera cuál se ejecutaría antes si este y que actualice directamente en el servidor o se ejecuta este y usualmente se ejecuta este antes el de enter entonces tampoco te va a funcionar y a la final sería otra vez una condición de carrera para ver cuál demonio se actualiza antes si esta o esta ya que Recuerda que cuando le colocamos aquí punto Live lo que hacemos aquí si abrimos la ventana aquí de la consola de desarrolladores venimos aquí r voy a recargar no tengas nada en el filtro cada vez que cambiamos aquí algo se llamaría aquí o se ejecutaría un proceso de actualización en el servidor si lo quito ya no ocurriría Por lo tanto todos los cambios se mantienen aquí en el cliente cosa que tampoco me gusta mucho con el Live ahí porque el cliente todavía está escribiendo por lo tanto puede que quiera no sé 10 coloque un uno ya se actualizó luego coloco un cero Entonces se va a volver a actualizar sería algo ineficiente y no tendría mucho sentido para esto si si tenía más sentido para lo que era el proceso de búsqueda que lo veíamos antes Recuerda que esto lo establecimos también para acá Aquí sí tiene más sentido Por ejemplo para los campos de selección y demás es que cuando cambie uno queremos automáticamente recargar el listado pero aquí no lo veo tanto y obviamente ya esto es cuestión de gustos y como lo quieras manejar tiene más sentido de que cuando el usuario presiona un enter que es lo que usualmente hace ahí también puedes colocar un mensaje alusivo a eso si quieres actualizar pégale un enter es que se actualicen las cantidades y es por eso que lo hacemos justamente por acá pero llegamos ya para finalizar el video al otro punto muy importante y es por qué empleamos el objeto ya tú vistes por qué no podemos emplear directamente el objeto porque todavía no se han actualizado el objeto me refiero al que tenemos aquí la propiedad Porque todavía no se ha actualizado en el servidor por lo tanto tenemos el valor anterior y estamos perdiendo el valor actual del cliente mientras que ese cambio sí se mantiene aquí en el cliente y tiene todo el sentido del mundo porque esto es un cambio a nivel del cliente que viene por acá a actualizar por lo tanto Recuerda que tenemos como un poco duplicado y un poco como que digo la ambigüedad que tenemos en lare y son de las cosas que me gustan y por otra parte no me gustan y que yo considero que es más sencillo de aprender que inertia pero por otra parte también tiene estas cositas que pueden costar entonces hay como que una lucha ahí de que para algunas cosas puede ser más sencillo el iware y por otras cosas puede ser más sencillo inertia entonces es cuestión de conocerlo y adapar nuestras necesidades y también que funcionan algunas cositas un poco extrañas por esa dualidad que tenemos por lo mencionado entonces nosotros sí tenemos los cambios a nivel de cliente porque otra vez el evento está sucediendo en el cliente y iare sí detecta esos cambios a nivel de cliente pero no los actualiza en el servidor pero lo bueno aquí es que si podemos emplear esos cambios del cliente específicamente count que lo tenemos en el objeto de wire de Livewire que lo utilizamos anteriormente para varias operaciones y este es el que sí le pasamos al servidor porque otra vez ahí sí se actualiza y se mantiene la sincronización automática entre los cambios que sucedan aquí en el campo con lo que tenemos en javascript y es muy importante este sería de javascript y este sería ya de php tal cual puedes ver entonces es por eso que empleamos.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter