[LiveComponent] property is not Stateful

[tito10047]

Hi,

I don't know what I'm doing wrong, but my properties are not stateful. When the component re-renders, the property has its default value again.

#[AsLiveComponent]
final class Foo
{
    use DefaultActionTrait;
    #[LiveProp()]
    public string $property = "default";

    public function random():void {
        $this->property = uniqid();
    }
}

<div{{ attributes }}>
    {{ this.property }}
    {{ this.random }}
    {{ this.property }}
</div>

{{ component('Foo',{
    'data-poll':"delay("~refreshInterval~"000)|$render"
}) }}

Output: defauld is still there, It should not be. every refres second string must be on fist place and second string is random. Because I want property by sateful on reload. when is one set, it must be same on second reload. default 667ee9425178c

[smnandre]

I see only one property here : $property.

In {{ this.random }} you are calling a "non-live" action (so it's called on first render, after state has been computed)

If you want to have action on you live properties after first render, you need to use live actions.. or act during mount/hydrate steps.

Could you maybe show a more "real example" of what you're trying to do, and i'll try to show you how it can be done ? :)

[tito10047]

I thought it was because it was computed before rendering. So, the problem is that you can't change live property in render time.

I must redesign my components to work in other way.

Thanks