look forward to a robust way to query element

[retsyo]

Question

I try to query the element and modify it. I stripped my code and get this not working one

from nicegui import app, ui

with ui.button().props('itemName=Quiz_1_A'):
    ui.label('old label string').props('data-my-target')

# bad code
# TypeError: 'Query' object is not subscriptable
#~ ui.query('[itemName="Quiz_1_A"]')[0].text = 'new label'

# code runs but dos not modify the label
ui.query('data-my-target').text = 'new label'

# bad code
# AttributeError: 'Query' object has no attribute 'set_text'
#~ ui.query('data-my-target').set_text('new label')

label2 = ui.label('hello')

#~ label2.text = 'world'    # it works
#~ label2.set_text('world')     # it works

ui.run()

[falkoschindler]

Yes, we're still debating about #1931.

Right now you can query elements by iterating something like the client's content element:

from nicegui import context, ui

with ui.button().props('itemName=Quiz_1_A'):
    ui.label('old label string').props('data-my-target')

button = [element for element in context.get_client().content if element._props.get('itemName') == 'Quiz_1_A'][0]
button.default_slot.children[0].text = 'new label string'

Or it you don't need the nested label:

from nicegui import context, ui

ui.button('old label').props('itemName=Quiz_1_A')

button = [element for element in context.get_client().content if element._props.get('itemName') == 'Quiz_1_A'][0]
button.text = 'new label'

It's not particularly pretty, but does the job.