NiceGui Tree with toggle buttons

Question

I'm trying to create a tree in NiceGui where every element has a toggle button. This is what I got so far:

from nicegui import events, ui

def toggleUpdate(e: events.GenericEventArguments) -> None:
    print(tree._props['nodes'])

tree = ui.tree([
    {'id': 'numbers', 'description': 'Just some numbers', 'update': True, 'children': [
    {'id': '1', 'description': 'The first number', 'update': False},
    {'id': '2', 'description': 'The second number', 'update': True},
]},
{'id': 'letters', 'description': 'Some latin letters', 'update': True, 'children': [
    {'id': 'A', 'description': 'The first letter', 'update': True},
    {'id': 'B', 'description': 'The second letter', 'update': True},
]},
], label_key='id', on_select=lambda e: ui.notify(e.value))

tree.add_slot('default-header', '''
<span :props="props">Node <strong>{{ props.node.id }}</strong></span>
''')
tree.add_slot('default-body', r'''
<span :props="props">Description: "{{ props.node.description }}"             <q-toggle
    v-model="props.node.update"
    label="Elemente updaten"
    left-label
    @update:model-value="() => $parent.$emit('toggleUpdate', props.node)"
/></span>
''')

ui.button("Test", on_click=lambda: toggleUpdate("TEST"))
tree.on('toggleUpdate', toggleUpdate)
tree.on('update:model-value', lambda e: ui.notify(e.args))

ui.run()

The tree works fine, but the data is not changed when I toggle the button and also the toggleUpdate event is not triggered. What am I doing wrong?

Answer 1

The Author of NiceGui found the solution. You have to use $parent.$parent.$parent.$emit() for the toggle. Full answer: https://github.com/zauberzeug/nicegui/discussions/3085#discussioncomment-9462868