Hi,
So I have some code, with Livewire + AlpineJS, that looks like:
@foreach($stuff as $ele)
<div>
<div x-show="!showMoreText({{ $ele['id'] }})" x-on:click="setShowMoreTextYes({{ $ele['id'] }})">Show more</div>
<div x-show="showMoreText({{ $ele['id'] }})">This is some more text <button x-on:click="setShowMoreTextNo({{ $ele['id'] }})">Close</button></div>
</div>
@endforeach
And then code in Alpine looks like:
stuff: @entangle('stuff'),
showMoreTextData: [],
function showMoreText(id)
{
if(this.showMoreTextData[id] == true)
{
return true;
}
return false;
}
function setShowMoreTextNo(id)
{
this.showMoreTextData[id] = false;
}
function setShowMoreTextYes(id)
{
this.showMoreTextData[id] = true;
}
This works just fine, WHEN the page is first loaded. If, however, you add some info to $stuff with Livewire, then it will act really strangely.
Stuff won’t show up, if you start clicking other stuff, sometimes it will update. Then other parts will become not clickable. If you stick an alert into the first Show more part, then it will show two alerts, but even though that happens, the This is some more text with the Close button won’t actually show up.
This only occurs when adding info to $stuff dynamically. For example, if you have a button like
<button wire:click="addStuff">Add Stuff</button>
And then in Livewire like:
public function addStuff()
{
$newEle = MyEle;
$newEle->name = 'name';
$newEle->save();
array_push($this->stuff, $newEle->toArray());
}
How does one actually get this type of functionality working, with dynamically adding that data? It works on load, but not when you’re adding stuff dynamically while on the page.
This post which seems to be related:
Any insights to this are greatly appreciated.