Showing of JSon Objects using VList

[QTM3]

Hi,
I'm new to Trame and Vuetify / JS. Love the framework btw. I'm facing a bit of an issue when trying to show a list of JSon object values using VList. I have a list of JSon objects, each with same set of parameters ("name", "color", "visible", "selected"). I want to show these as a list in vuetify under Trame that updates with the values. I want to show "visible" as a VSwitch with its color set to "color", "name" should be shown as text and "selected" as a checkbox. So far I'm able to get the name to update but having trouble showing other values. My code is as follows:

from trame.app import get_server
from trame.widgets import vtk as tvtk, vuetify        
from trame.ui.vuetify import SinglePageWithDrawerLayout

import json

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

state.sgnodeList = []
jobject = json.loads('{}');
jobject['name'] = "First"
jobject['visible'] = bool(False)
jobject['selfcolor'] = '#ff643d'
jobject['selected'] = bool(True)

state.sgnodeList.append(jobject)

jobject = json.loads('{}');
jobject['name'] = "Second"
jobject['visible'] = bool(True)
jobject['selfcolor'] = "red"
jobject['selected'] = bool(False)

state.sgnodeList.append(jobject)

def changeSelected():
    print("changing selected")
    pass


with SinglePageWithDrawerLayout(server, style="overflow: hidden") as layout:
     layout.title.set_text("My App")

     with layout.drawer:
        with vuetify.VList(shaped=True):
            with vuetify.VListItem(v_for="val in sgnodeList"):
                vuetify.VSwitch(
                            v_model = "{{val.visible}}",
                            color="{{val.selfcolor}}"
                            )
                with vuetify.VListItemContent():
                    vuetify.VListItemTitle("{{val.name}}")

                vuetify.VCheckbox(
                                 v_model= "{{val.selected}}",
                                 click=changeSelected
                                )

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

when using "v_model" nothing shows up (its a blank screen). Changing "v_model" to "input_value" does show the page but the toggles are wrong and they do not update with the change in the state. Following image shows what I get when using "input_value" instead of "v_model":

Any help would be appreciated.

[jourdain]

It would be good to read the Vue.js template reference syntax as it is different to template a string for display vs providing a value (bool, number, str, obj) to a property.

The solution for the current question is available here and below for reference.

from trame.app import get_server
from trame.widgets import vtk as tvtk, vuetify
from trame.ui.vuetify import SinglePageWithDrawerLayout

import json

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

state.sgnodeList = json.loads(
    """[
    {
        "name": "First",
        "visible": false,
        "selfcolor": "#ff643d",
        "selected": true
    },
    {
        "name": "Second",
        "visible": true,
        "selfcolor": "green",
        "selected": false
    }
]"""
)


def changeSelected():
    print("changing selected")


with SinglePageWithDrawerLayout(server, style="overflow: hidden") as layout:
    layout.title.set_text("My App")

    with layout.drawer:
        with vuetify.VList(shaped=True):
            with vuetify.VListItem(v_for="val, idx in sgnodeList", key="idx"):
                vuetify.VSwitch(
                    v_model=("val.visible",),
                    color=("val.selfcolor",),
                )
                with vuetify.VListItemContent():
                    vuetify.VListItemTitle("{{val.name}}")

                vuetify.VCheckbox(
                    v_model=("val.selected",),
                    click=changeSelected,
                )

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

But soon enough, you will realize that the nested structure is not reactive. So you will have to add some event listener if you want to track the UI changes on the data structure. Or if you were to use vue3, you could set a deeply reactive variable and just listen to sgnodeList change.

[QTM3]

@jourdain Thank you so much, this works perfectly!. Also thanks for the reference. I will go through it to get more insight, coming to python, Vuetify / JS from C++ is not easy :)

[jourdain]

I bet, but once you get the gist of it, it will should be fine.