Changing the content of a html.Div dynamically

[DrAkustik]

Is it possible to change the content of a "html.Div" dynamically?

Something like:

def load():
    with div_to_modify:
        html.P("Hello world!")

with html.Div():
    with vuetify.VBtn(
        click=(load, ""),
    ):
        vuetify.VIcon("mdi-plus-circle")

with html.Div() as div_to_modify:
    pass

I know that the code above does not work.

What I want to do is, load data after a button click and modify the content of another div based on the data. I think "v_if" and "v_show" are not appropriate for this functionality, because at the moment of starting the app I don't know the content of the data.

[DrAkustik]

I found out that a vuetify component has an add_child method and it seems to possible to add components dynamically. However, the added components are not visible. Thus, I assume the parent component has to be updated or synchronized with the client.

What has to be done after using the add_child method to update the gui?

I remember that the vtk component has an update method. Is there something similar available for general vuetify components?

[jourdain]

Normally you rely on the templating infrastructure of Vue.js for handling the dynamic content of your page.

If you really have to modify it like you want, you just need to flush the layout. But in general that is a bad idea and they are better solutions like using another layout that you update while display as a child of the main one.

But without actual detail on what you really want to do, it is hard to advise.

[DrAkustik]

Thanks. I will give the templating infrastructure a try.