Dynamic creation of Vuetify Components

[JT3DAI]

Hi guys,

Not sure how to do the following.

I would like to loop through a json file and create the vuetify components dynamically at run rime. To help I have created a small sample json example below.

Lets say I read this in. How can I dynamically create the VTextField and VSlider widgets dynamically when the user loads it. Are there any existing examples that show something like this? Everything I have found is static. I would need all the components to be reactive and if the json changes so do the components (labels, values, types etc...)

[
  { 
    "key": "test_1", 
    "type": "float", 
    "default": 4000,
    "widget": "text"          // This will map to a VTextField
  },
  { 
    "key": "test_2", 
    "type": "int", 
    "default": 50,
    "widget": "slider",       // This will map to a VSlider
    "min": 0, 
    "max": 100, 
    "step": 1
  }
]

[jourdain]

You can do something like that

html.Component(v_for="field, i in fields", key="i", is=("field.type",), v_bind="field.params")

where fields should be a state variable that could contains the following

state.fields = [
   {
       type: "VTextField",
       params: {
            'v-model.number': 'test_1',
             type: number',
       }
   },
   ...
]

There are other ways with trame-simput and trame-dataclass to do that.

[JT3DAI]

ok - interesting Seb. Appreciate the feedback as always. I was going about it all wrong. Let me try your suggestion and see how far I can get with it.

As a matter of interest, are there any working examples with this approach anywhere?

[JT3DAI]

ok Seb, so I'm using this as a test

        self.state.fields = [
            {
                "type": "v-text-field",   # lowercase
                "params": {
                    "v-model.number": "test_1",
                    "type": "number",
                    "label": "Test 1",
                    "clearable": True,
                }
            },
            # Add more fields here
        ]

and I use this function to  render the component but something wrong as I get a syntax error on "is" . Am I missing something? Number of Fields is 1

def _render_test(self):
    with html.Div():
        # Static text to prove the div renders
        html.Div("Number of fields: {{ fields.length }}")


        # Dynamic fields
        html.Component(
            v_for="field, i in fields",
            key="i",
            "is": "field.type",
            v_bind="field.params",
        )

So not sure what is the correct way of passing field.type with is?

[jourdain]

You: "is": "field.type",
Me: is=("field.type",),

[jourdain]

But that is not dynamic on the client... What I was providing is a fully dynamic solution that execute on the client when your fields in the state change.

[JT3DAI]

lost my way there on Friday Seb - long week! - you are correct.

ok this is what I currently have but the problem is when using v_model I have to hardcode the entry for it to work eg test_1. So I presume this is why I need to use v-on but I'm not sure of the syntax to dynamically add it for each component. v-bind seems fine the way it's written below?

   def _render_component_test(self):
        # Reserve the state variable for v-model
        self.state.test_1 = 123
     
        self.state.active_group = [
            {
                "type": "v-text-field",
                "v_model": "test_1",  # not used below - it's hard coded
                "params": {
                    "label": "IP Address",
                    "clearable": True,
                    "hint": "Please enter a valid IP address"
                },
            }
        ]


        with html.Div():
            html.Div("Number of fields: {{ Object.keys(active_group).length }}")         

            # Render the component dynamically
            html.Component(
                v_for="(field, i) in active_group",
                key="i",
                is_name=("field.type",),
                v_model=("test_1",),
                v_bind="field.params",
                #v_on=?????
            )

[JT3DAI]

So I've tried below for v_on but the function is undefined. " JS Error => TypeError: Cannot read properties of undefined (reading 'update_test_1')"

I am using classes not global functions so presume that is not a problem.

This is in a class and this class has controller passed to it when created.

def update_test_1(self, val):
      self.state.test_1 = val

I set this before i call the render function. Should it be tied to the controller?
self.controller.update_test_1 = self.update_test_1

and then this

def _render_component_test(self):
      # Reserve the state variable for v-model
      self.state.test_1 = 123
   
      # For testing
      self.state.active_sensor_group = [
          {
              "type": "v-text-field",
              "v_model": "test_1",  # not used below
              "params": {
                  "label": "IP Address",
                  "clearable": True,
                  "hint": "Please enter a valid IP address"
              },
          }
      ]        

      with html.Div():
          html.Div("Number of fields: {{ Object.keys(active_sensor_group).length }}")         

          # Render the component dynamically
          html.Component(
              v_for="(field, i) in active_sensor_group",
              key="i",
              is_name=("field.type",),
              #v_model=("test_1",),
              v_bind="field.params",                         
              v_on="{ 'update:model-value': val => $server.update_test_1(val) }"             
          )

[jourdain]

It is simpler than that, but it would require some time to properly cover it here. Feel free to reach out for support so we can help you solve those little thing faster.

[JT3DAI]

will do Seb - I'll reach out to Jules in France. We do have a support contract in place. I'll direct him to this discussion