Reactivity of nested changes in Vue3

[resammc]

Hi,

First of all, thanks a lot for the great library! I've been using it for over than a year now and am totally mindblown by how easy it is to implement ideas using trame and vuetify.

Now, to my problem, I'm in the process of migrating our code from Vue2 to Vue3. So far, things are going well, except a problem with changing the values inside a nested object.

I have made a small example which shows the problem. Here is the code for Vue2 which works without any problems:

from trame.app import get_server
from trame.widgets import vuetify2 as vuetify
from trame.widgets import html
from trame.ui.vuetify2 import SinglePageWithDrawerLayout

# -----------------------------------------------------------------------------
# Trame setup
# -----------------------------------------------------------------------------

server = get_server()
server.client_type = "vue2"
state, ctrl = server.state, server.controller

state.mySliderDictionary = dict(testSlider1 = {"value": 5})
state.displayData = dict(testSlider1 = state.mySliderDictionary["testSlider1"]["value"])

@state.change("mySliderDictionary")
def sliderDictionaryModified(**kwargs):
    state.displayData = dict(testSlider1 = state.mySliderDictionary["testSlider1"]["value"])

# -----------------------------------------------------------------------------
# GUI
# -----------------------------------------------------------------------------

state.trame__title = "Menu example"

with SinglePageWithDrawerLayout(server) as layout:
    with layout.toolbar as toolbar:
        vuetify.VSpacer()

    with layout.drawer:
        vuetify.VSpacer()
        vuetify.VSlider(
                    v_model="mySliderDictionary['testSlider1']['value']",
                    min=1,
                    max=10,
                    step=1,
                    input= "flushState('mySliderDictionary')",
                )

        vuetify.VChip('Slider value: ' + '{{displayData["testSlider1"]}}', variant="text")

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

so, the idea is simple. I have a dictionary as a state variable which stores some values. I would like to be able to update the values using Vuetify components, a slider in this case. A VChip will then show the current value. This works perfectly fine in vue2, but if I change the code to vue3:

from trame.app import get_server
from trame.widgets import vuetify3 as vuetify
from trame.widgets import html
from trame.ui.vuetify3 import SinglePageWithDrawerLayout

# -----------------------------------------------------------------------------
# Trame setup
# -----------------------------------------------------------------------------

server = get_server()
server.client_type = "vue3"
state, ctrl = server.state, server.controller

state.mySliderDictionary = dict(testSlider1 = {"value": 5})
state.displayData = dict(testSlider1 = state.mySliderDictionary["testSlider1"]["value"])

@state.change("mySliderDictionary")
def sliderDictionaryModified(**kwargs):
    state.displayData = dict(testSlider1 = state.mySliderDictionary["testSlider1"]["value"])

# -----------------------------------------------------------------------------
# GUI
# -----------------------------------------------------------------------------

state.trame__title = "Menu example"

with SinglePageWithDrawerLayout(server) as layout:
    with layout.toolbar as toolbar:
        vuetify.VSpacer()

    with layout.drawer:
        vuetify.VSpacer()
        vuetify.VSlider(
                    v_model="mySliderDictionary['testSlider1']['value']",
                    min=1,
                    max=10,
                    step=1,
                    update_model_value= "flushState('mySliderDictionary')",
                )

        vuetify.VChip('Slider value: ' + '{{displayData["testSlider1"]}}', variant="text")

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

the slider gets really slow in responding to the mouse events (it takes seconds for it to change its position) and even then it seems like it does not change the value inside the dictionary. The problem does not occur when I use non-nested objects.

So, I was wondering if it is a known issue with the current version of the code, or I'm simply missing something here.

Python 3.9.18
trame==3.5.1
trame-client==2.15.0
trame-components==2.2.1
trame-plotly==3.0.2
trame-server==2.16.0
trame-vtk==2.7.1
trame-vuetify==2.4.2

Many thanks,

Resam

[jourdain]

Thanks for the kind words and providing such example.

Ideally it should just work, but something could be happening internally with the reactive model. Give me some time to investigate.

[jourdain]

Well, it was not too bad... Just a typo in your vue3 example because of our rudimentary args processing.

So the vuetify event name is update:modelValue which you translated to update_model_value but in our generated Python from vuetify3 API it got mapped to update_modelValue.

A way to validate what you wrote in Python get properly translated is to just print the widget:

from trame.app import get_server
from trame.widgets import vuetify3 as vuetify
from trame.widgets import html
from trame.ui.vuetify3 import SinglePageWithDrawerLayout

# -----------------------------------------------------------------------------
# Trame setup
# -----------------------------------------------------------------------------

server = get_server()
server.client_type = "vue3"
state, ctrl = server.state, server.controller

state.mySliderDictionary = dict(testSlider1 = {"value": 5})
state.displayData = dict(testSlider1 = state.mySliderDictionary["testSlider1"]["value"])

@state.change("mySliderDictionary")
def sliderDictionaryModified(**kwargs):
    state.displayData = dict(testSlider1 = state.mySliderDictionary["testSlider1"]["value"])

# -----------------------------------------------------------------------------
# GUI
# -----------------------------------------------------------------------------

state.trame__title = "Menu example"

with SinglePageWithDrawerLayout(server) as layout:
    with layout.toolbar as toolbar:
        vuetify.VSpacer()

    with layout.drawer:
        vuetify.VSpacer()
        print(
        	vuetify.VSlider(
                    v_model="mySliderDictionary.testSlider1.value",
                    min=1,
                    max=10,
                    step=1,
                    update_modelValue= "flushState('mySliderDictionary')",
        	)
        )

        vuetify.VChip('Slider value: ' + '{{displayData.testSlider1}}', variant="text")

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

[resammc]

Oh, thanks a lot., that solved the problem. Interestingly, even when I was commenting out the line for update_model_value, the problem was persistent, so I didn't think that could be the problem.