Level 16
Use wire:change. Check Magic Actions
wire:change="update({{ example -> id }})"
1 like
Mar 21, 2021
7
Level 7
Livewire Click Away?
I haven't been able to find anything relating to an action to submit an update request when we click away. Something like wire:clickaway = "update( {{ example -> id }} )"
Essentially, I am trying to create the effect of when a user clicks on the title, it will open an input box. Than when user clicks away, it will save the data that has been updated in the box.
Right now, I got this working with a checkmark icon appearing when the edit is true using Alpine
<div x-data="{edit : false}" >
<h2 @click="edit = true" x-show="edit === false" >{{$example -> title}} </h2>
<div x-show="edit === true">
<input name="title" type="text" placeholder="{{$example -> title}}" wire:model="title" >
<i class="bi bi-check " wire:click="update({{ $example->id }})" @click="edit = false"></i>
</div>
</div>
I wanted to change this to something like
<div x-data="{edit : false}" >
<h2 @click="edit = true" x-show="edit === false" >{{$example -> title}} </h2>
<input x-show="edit === true" name="title" type="text" placeholder="{{$example -> title}}" wire:model="title" wire:clickaway="update({{ $example->id }})" @click.away="edit = false" >
</div>
Is there a way to pass data into livewire update using the alpine @click.away?
Level 7
Thank you!! This works perfectly :)
Level 122
use the lazy modifier
<input type="text" wire:model.lazy="message">
Now, the $message property will only be updated when the user clicks away from the input field.
1 like
Level 7
I got an error trying to do this method, not sure if I am implementing it correctly
<input name="account" type="text" placeholder="{{$example -> account}}" wire:model.lazy="update({{ $account->id }})" >
The other solution worked tho, however, would love to learn this approach as well :) I will try some more stuff out
Level 122
I got an error trying to do this method
it would help to know the error
Level 7
Here are the two approaches side by side
// Method 1
<input x-show="edit === true" name="account" type="text" placeholder="{{$sportsbook -> account}}" wire:model="account" wire:change="updateAccount({{ $sportsbook->id }})" >
// Method 2
<input x-show="edit === true" name="account" type="text" placeholder="{{ $sportsbook-> account }}" wire:model.lazy="updateAccount({{ $sportsbook->id }})" >
The error is this when I change something in method 2
C:\Users\home\Desktop\code\sportsapp\
Livewire\Exceptions\PropertyNotFoundException
Property [$updateAccount(1)] not found on component: [sportsbooks]
http://sportsapp.test/?sortAsc=true
Level 122
because wire:model is bound to a livewire property - not a function. You cannot pass it a value.
1 like
Please or to participate in this conversation.