Level 122
For diagnostic, try a static text?
public function cancel() {
$this->desc = "Field was cleared";
}
Nov 1, 2023
9
Level 1
Livewire not updating a textarea when changing value in Laravel
What I have is quite simple. This is the structure in the HTML
<section x-data="{ isEditing: false }">
<div x-show="!isEditing">
<div>{{ $desc }}</div>
<button @click="isEditing=true">edit</button>
</div>
<div x-show="isEditing">
<textarea wire:model="desc"></textarea>
<button wire:click="save" @click="isEditing="false">save</button>
<button wire:click="cancel" @click="isEditing="false">cancel</button>
</div>
</section>
Then in the Livewire component I have this cancel function:
public function cancel() {
$this->desc = $this->whatever->desc;
}
What I intend to do is: the $this->desc is initialized on the mount() function and works perfectly. When I click "edit" on the HTML it shows the textarea with its data. Then I change something and click cancel. Since the textarea is bind to the desc variable it should return to the initial value, but when I click on edit again, it has the edited value and not the original one.
Even if I call $this->mount() the result is the same.
Do I have to refresh the textarea? I got no idea what to do. I even tried wire:model.live and does the same.
(Using Livewire 3)
Level 1
@Snapey Yeah, did that... does the same, it doesn't change
But if I do
public function cancel() {
$this->desc = "Field was cleared";
info($this->desc);
}
Of course the variable got the text. I just don't understand why the textarea doesn't get the changes.
Level 6
you can try to add something like initial value
this is the reference
class YourLivewireComponent extends Component
{
public $desc;
public $initialDesc; // initial value
public function mount()
{
$this->desc = $this->whatever->desc;
$this->initialDesc = $this->desc; // initial value
}
public function cancel()
{
// reset to initial value
$this->desc = $this->initialDesc;
}
}
Level 1
Nah... won't work. If can't assign static values, it doesn't matter if I create another var This must be something about updating the textarea that doesn't work in the second turn (the first time it works as it should)
Level 122
is the code you showed inside any kind of loop or parent/child component setup?
Level 1
@Snapey Nope... its like a controller "show" with a button to edit some fields, so its only one record.
Level 122
what happens if you temporarily remove @click="isEditing="false" or make it so that the element always shows
Level 1
@Snapey Good Idea...
Nothing happens.
This is really absurd, my code is now:
{{ $desc }}
<textarea ... wire:model.live="desc"></textarea>
<buttons>...
The buttons has no @click now. Only the wire:click that goes to save() or cancel()
If I start typing in the textarea it shows what I'm doing in the var above. If I click the cancel button, the text above the textarea will change as desired, but the textarea will keep its edited content. In fact, even if I do
<textarea ...>{{ $desc }}</textarea>
Won't work either
I'm pretty sure there must be a way to refresh the textarea, but I don't know how
Level 1
I have the same situation. textarea code in html changes, but in browser it shows old value
Please or to participate in this conversation.