Laravel Livewire: Wire:keydown.enter keyboard enter event
The next implementation we have to do is that when changing the quantities in the INPUT, we also change them in the associated cart item; for this, we will use the enter event implemented as follows:
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>As you can see in the code above, the same add() method is invoked as is used not only for adding, but also for updating and deleting; for quantities, it is used through the Livewire JavaScript object $wire.count instead:
<input wire:keydown.enter='add({{ $item }},{{ $count }})'Since the change occurred on the client, it has not yet been updated on the server, keeping the previous value and making it impossible to update the quantity in the item; the value to be updated is on the client, and to obtain it, we can use Livewire's JavaScript as shown above; you can place a printout in the method and evaluate what was discussed above:
app/Livewire/Shop/CartItem.php
#[On('addItemToCart')]
function add(Post $post, int $count = 1) {
dd($count);
***
}The problem is the race condition, it updates on the server and that is the problem you could consider here placing a Live But then here you had a race condition which would be executed first if this one and that updates directly on the server or this one is executed and usually this one is executed before enter then it will not work for you either and in the end it would be another race condition to see which demon is updated first if this one or this one since Remember that when we put here point Live what we do here if we open the window here of the developer console we come here r I am going to reload do not have anything in the filter every time we change here something would be called here or an update process would be executed on the server if I remove it it would no longer happen Therefore all the changes are kept here on the client which I also do not like very much with the Live there because the client is still writing therefore it may want I don't know 10 put a one it was already updated then I put a zero Then it will be updated again it would be somewhat inefficient and it would not make much sense for this if it made more sense for what was the search process that we saw before Remember that we also established this for here Here it does make more sense For example for the selection fields and others is that when one changes we want to automatically reload the list but here I don't see it so much and obviously this is a matter of taste and how you want to handle it makes more sense than when the user presses enter which is what they usually do there you can also put a message alluding to that if you want to update hit enter is that the quantities are updated and that is why we do it right here but we arrive now to finish the video to the other very important point and it is why we use the object you already saw why we can't directly use the object because the object has not yet been updated I mean the one we have here the property Because it has not yet been updated on the server therefore we have the previous value and we are losing the current value of the client while that change is maintained here on the client and it makes perfect sense because this is a change at the client level that comes here to update therefore Remember that we have like a little duplicate and a little I mean, the ambiguity that we have in lare and they are the things that I like and on the other hand I don't like and that I consider that it is easier to learn than inertia but on the other hand it also has these little things that can be difficult so there is like a struggle there that for some things iware can be simpler and for other things inertia can be simpler so it is a matter of knowing it and adapting our needs and also that some little things work a little strange because of that duality that we have for what was mentioned then we do have the changes at the client level because again the event is happening in the client and iare does detect those changes at the client level but it does not update them on the server but the good thing here is that if we can use those changes from the client specifically count that we have it in the wire object of Livewire that we used previously for various operations and this is the one that we do pass to the server because again there it is updated and the automatic synchronization is maintained between the changes that happen here in the field with what we have in javascript and it is very important this would be from javascript and this would be from php as you can see then that is why we use.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter