Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

veptune's avatar

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

0 likes
0 replies

Please or to participate in this conversation.