Dynamically generating components

[MuuXB]

Question

I want to dynamically update or generate UI components when the event function is triggered. I have tried the following approach, but the page does not update. Can you help me with a solution? Note: I do not want to refresh the page entirely.

class Plug:
    def __init__(self):
        self.labels = {}
        with ui.card():
            with ui.column() as self.container:
                pass

    def on_event(self, key, value):
        if key in self.labels:
            self.labels[key].set_text(value)
        else:
            with self.container:
                with ui.row():
                    ui.label(f'{key}: ').classes('font-bold')
                    self.labels[key] = ui.label(value)

[frankvp11]

Can you give a MRE?
I'd like to be able to help you, but the code you have given makes it hard to do so.
Perhaps you can try putting the UI login in a seperate function and wrap it with a refreshable decorator, and just refresh that in the on_event function?

[kleynjan]

How about:

from nicegui import ui

class Plug:
    def __init__(self):
        self.state = {}

    def add_row(self, key, value):
        self.state[key] = value
        self.build.refresh()

    @ui.refreshable
    def build(self):
        with ui.card():
            with ui.column():
                for key, val in self.state.items():
                    with ui.row():
                        ui.label(f'{key}: ').classes('font-bold')
                        ui.label(val)

@ui.page("/")
def index():
    plug = Plug()
    plug.build()        # type: ignore / pylance can't look past the decorator

    with ui.row():
        k = ui.input(label='key')
        v = ui.input(label='val')
    ui.button('Add', on_click=lambda: plug.add_row(k.value, v.value))

ui.run()