TreeView - get id of active node

[AndiSchratti]

Hello,
I have prepared a small example for testing, but I don’t quite understand how some of the arguments behave. As far as I know 'active' must be an array, but after each selection it still remains empty. I would be very grateful if someone could help me get the ID of the currently selected item. Here is my code for testing:

from trame.widgets import vuetify
from trame_vuetify.ui.vuetify import SinglePageWithDrawerLayout
from vtkmodules.vtkInteractionStyle import vtkInteractorStyleSwitch  # noqa
import vtkmodules.vtkRenderingOpenGL2  # noqa

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

def trame_app():
    state.show_dialog = False
    state.data = [
        {
            "id": "ID15",
            "name": "ID15",
            "children": [
                {"id": "ID16", "name": "test", "children": []},
                {"id": "ID17", "name": "test", "children": []},
            ],
        },
        {
            "id": "ID27",
            "name": "ID27",
            "children": [
                {"id": "ID28", "name": "Sub", "children": []},
            ],
        },
    ]

    def test():
        # TODO: get the id
        print(state.selected)

    with SinglePageWithDrawerLayout(server,) as layout:
        layout.title.set_text("Hello trame")
        with vuetify.VContainer(classes="pa-4"):
            with layout.drawer:
                vuetify.VBtn("TEST", click="show_dialog=true")

            with vuetify.VDialog(v_model=("show_dialog", False), max_width="600px"):
                with vuetify.VCard():
                    vuetify.VCardTitle("Select something")
                    with vuetify.VCardText():
                        vuetify.VTreeview(
                            items=("data",),
                            activatable=True,
                            active=("selected", []),
                            update_active=test,
                        )
                    vuetify.VBtn(click="alert(selected)")

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

[alesgenova]

To get your python test() function be passed the active array parameter from the client modify your code like so:

def test(active):
    print(active)

vuetify.VTreeview(
    ...,
    update_active=(test, "[$event]"),
    ...,
)

Read more about methods binding here: https://kitware.github.io/trame/guide/intro/cheatsheet.html#method-binding

[AndiSchratti]

That’s what I was looking for – thank you!

[jourdain]

Also are you sure you want to use vuetify2/vue2 ? It seems like you are looking at the v3 API for the v2 library...

[AndiSchratti]

Yeah, I’ve got a larger project with Vuetify 2 where I’m trying to implement functionality like this.