track state change on dictionary elements (v_model within v_for)

[PedroFO]

Hi,

I am new on trame and vue/vuetify so this question may not make sense, here I go:

So I want to generate a list of sliders dynamically like following, based on a list that i may not be able to know the number of items before hand:

with vuetify.VSimpleTable( ):
                      vuetify.VSlider(
                           v_for="(item, i) in hdd_list",
                           label = ('item','{{item}}'),          
                           thumb_label="always",
                           thumb_size="24",
                       )

Then what i am struggling to do, is to programmatically track each individual change on each slider. My first idea is to set a dictionary 'parameters_dic' that contains each item in hdd_list and use v_model to keep track, something like:

 vuetify.VSlider(
                            v_for="(item, i) in hdd_list",
                            label = ('item','{{item}}'),
                            v_model="parameters_dic[item]" ,
                        )

# listener
@state.change("parameters_dic")
def upd_data_source(parameters_dic, **kwargs):
    #whatever

But I guess this will track only changes on the variable 'parameters_dic' not if a value on any of its keys change. Any guess how or if this can be achieved?

Regards,
Pedro

[jourdain]

Like you said because the change is nested the reactivity fails to notice the change but you can fix that by adding change=" flushState('parameters_dic')", which means at the end of the slider change, the "client/js" will execute a flushState that will have the effect of pushing any variable listed to the server regardless of their modification.

If you want to have a more tight sync, you can use input=... rather than change=....

HTH,

Seb