v_for.py

import asyncio
from trame.app import get_server
from trame.widgets import vuetify, html
from trame.ui.vuetify import SinglePageWithDrawerLayout

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

server = get_server(client_type="vue2",
                    log_network="./logs.txt",
                    desktop_debug=True)
state, ctrl = server.state, server.controller

state.items = [{"id": "a123"}, {"id": "a456"}, {"id": "a789"}]
state.a123 = {
    "range": (10, 90),
    "range_min": 0,
    "range_max": 100,
    "opacity": 1,
}
state.a456 = {
    "range": (20, 80),
    "range_min": 0,
    "range_max": 100,
    "opacity": 1,
    }
state.a789 = {
    "range": (30, 70),
    "range_min": 0,
    "range_max": 100,
    "opacity": 1,
    }


@ctrl.add("on_server_reload")
def print_item(item):
    print("Clicked on", item)


@state.change("a123")
def on_a123_change(*args, **kwargs):
    state.a456["range"] = tuple(state.a123["range"])
    print("on_a123_change", state.a123, state.a456)


async def busy():
    await asyncio.sleep(5)


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

state.trame__title = "v_for example"

with SinglePageWithDrawerLayout(server) as layout:

    with layout.drawer:
        html.Div("Theme: {{ $vuetify.theme.dark }}")
        html.Div("Busy: {{ trame__busy }}")
        with vuetify.VListItem(
                    v_for="(item, i) in items",
                    key="i",
                    value=["item"],
                ):
                    # vuetify.VListItemTitle("{{ item }}", click=(print_item, "[item]"))
                    vuetify.VRangeSlider(
                        label=("`${item.id}`", ),
                        v_model=("get(`${item.id}`).range",),
                        min=("get(`${item.id}`).range_min",),
                        max=("get(`${item.id}`).range_max",),
                        end=("flushState(`${item.id}`)")
                    )
                    vuetify.VSlider(
                        v_model="get(`${item.id}`).opacity",
                        min=0,
                        max=1,
                        end=("flushState(`${item.id}`)")
                    )
    with layout.content:
        html.Div("State: {{ get() }}") # how can I print here the whole state dict ?

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

Example to demonstrate v_for usage, with indirect nested state access.