Oct 7, 2024
0
Level 1
Variable not updated by livewire when used as a style attribute value
Hello all,
I'm using Livewire to dynamically update a progress bar, but the style="width" attribute doesn't refresh correctly with Livewire.
<div wire:poll class="relative h-5 w-full rounded-full bg-stroke dark:bg-strokedark">
<div class="absolute left-0 h-full rounded-full bg-primary" style="width: {{ $campaign->progress }}%">
<span class="absolute -right-4 bottom-full z-1 mb-2 inline-block rounded-sm bg-primary px-2 py-1 text-xs font-bold text-white">
<span class="absolute -bottom-1 left-1/2 -z-1 h-2 w-2 -translate-x-1/2 rotate-45 bg-primary"></span>
{{ $campaign->progress }}%
</span>
</div>
</div>
But for the same variable, $campaign->progress, I got different value, for example :
<div wire:id="Ldkc3YGdR9488JMmLWFT" wire:poll="" class="relative h-5 w-full rounded-full bg-stroke dark:bg-strokedark">
<div class="absolute left-0 h-full rounded-full bg-primary" style="width: 0%">
<span class="absolute -right-4 bottom-full z-1 mb-2 inline-block rounded-sm bg-primary px-2 py-1 text-xs font-bold text-white">
<span class="absolute -bottom-1 left-1/2 -z-1 h-2 w-2 -translate-x-1/2 rotate-45 bg-primary"></span>
90%
</span>
</div>
</div>
The first $campaign->progress, used as a style attribute, is never updated, unless I manually refresh the whole page, but the second occurence, displayed between the works well.
Any idea why and how to fix it?
Thanks
Please or to participate in this conversation.