Dictionary as state variable and VCheckboxBtn

[vargonis]

Hi there. I'm not being able to make a VCheckboxBtn react correctly to clicks. Consider this code:

from trame.app import get_server
from trame.ui.vuetify3 import VAppLayout
from trame.widgets import vuetify3 as v3

server = get_server()
state = server.state
state.simple = True
state.nested = {"checked": True}

@state.change("simple")
def update_checkbox(simple, **kwargs):
    print(state.simple)

@state.change("nested")
def update_checkbox(nested, **kwargs):
    print(state.nested)

with VAppLayout(server):
    v3.VCheckboxBtn(v_model=("simple",)) # works well
    v3.VCheckboxBtn(v_model=("nested.checked",), click="flushState('nested')") # need to click twice to make it update!

server.start()

I originally didn't have the flushState part and added it after reading #599. However, as stated in the comment, a click on the second button does not have any effect until a second click (anywhere in the window) happens. What am I doing wrong here? Thanks for your help!

[jourdain]

Things are not deeply reactive with trame. You are getting into the weeds of vue.js and ref. But a simpler solution would be to use something like that example

[vargonis]

Looks good. I'll take a closer look when I'm less tired. Thanks!

[vargonis]

Works like a charm! I don't even need the click_"flushState('nested')" part. Just for the sake of completeness, this is the working code:

from trame.app import get_server
from trame.ui.vuetify3 import VAppLayout
from trame.widgets import client, vuetify3 as v3

server = get_server()
state = server.state
state.nested = {"checked": True}

@state.change("nested")
def update_checkbox(nested, **kwargs):
    print(state.nested)

with VAppLayout(server):
    with client.DeepReactive("nested") as dr:
        v3.VCheckboxBtn(v_model=("nested.checked",))

server.start()