Reactivity of VueJS variables and components

[DavidBerger98]

I am trying to wrap my head around some intricacies of vuejs reactivity. I know there are some caveats to it.

That said, I tried to take the example howdoi/dynamic.py and add the feature that the Start countdown button is disabled while the countdown is running.

I added a variable to the state called running and set it to True when the countdown is started. However, the button does not get disabled. I understand that this is due to the caveat.
If we changed the click event for the button to click="running=true" the components would react as expected, but then start_countdown is run.
What is the way to do that in trame?

A final thing that confused me: I added a snippet:

@change("running")
def update_running(running, **kwargs):
    print(running)

And it doesn't react to 'state.running = True' at the beginning of 'start_countdown' (as expected), however it does react to 'state.running = False' at the end of it. Does trame force an update when a method is finished or what is the explanation here?

See here my full code:

import asyncio
from trame import state, change
from trame.layouts import SinglePage
from trame.html import vuetify

coundown_init = 10
state.running = False

@change("running")
def update_running(running, **kwargs):
    print(running)

# Timer to dynamically change shared state "countdown"
async def start_countdown():
    state.running = True

    try:
        state.countdown = int(state.countdown)
    except:
        state.countdown = coundown_init

    while state.countdown > 0:
        await asyncio.sleep(0.5)
        state.countdown -= 1
        state.flush("countdown")

    state.running = False

layout = SinglePage("Coundown")
layout.title.set_text("Countdown")

with layout.toolbar:
    vuetify.VSpacer()
    vuetify.VBtn(
        "Start countdown",
        click=start_countdown,
        disabled=("running",),
    )

with layout.content:
    vuetify.VTextField(
        v_model=("countdown", coundown_init),
        classes="ma-8",
    )

if __name__ == "__main__":
    layout.start()

[jourdain]

The trickiness of Python async... ;-)

It will be too long to explain all of it on that thread but we can definitely meet and discuss it.

In general the big picture is the following:

• The client call an async method that hold the web server until it fully complete
• trame will gather changes and process them once a call is complete
• flush force the server to push pieces of state change to the client before the completion of the method

A solution to that is to fork the execution flow into an async task and make sure you flush from time to time so the web-server/trame can process those changes by calling @change and state sync with client while the task is going on a yielding time to the server/trame.

HTH

[DavidBerger98]

I see! Thanks so much for your answer. And yes, Python async is definitely tricky ^^

In case anyone is interested, here's the fixed code:

import asyncio
from trame import state
from trame.layouts import SinglePage
from trame.html import vuetify

coundown_init = 10
state.running = False

# Timer to dynamically change shared state "countdown"
async def start_countdown():
    state.running = True
    state.flush("running")

    try:
        state.countdown = int(state.countdown)
    except:
        state.countdown = coundown_init

    while state.countdown > 0:
        await asyncio.sleep(0.5)
        state.countdown -= 1
        state.flush("countdown")

    state.running = False

layout = SinglePage("Coundown")
layout.title.set_text("Countdown")

with layout.toolbar:
    vuetify.VSpacer()
    vuetify.VBtn(
        "Start countdown",
        click=start_countdown,
        disabled=("running",),
    )

with layout.content:
    vuetify.VTextField(
        v_model=("countdown", coundown_init),
        classes="ma-8",
    )

if __name__ == "__main__":
    layout.start()