How to interpolate an index on html Vue list templates?

please take a look at the following code. It’s written right in an html page, so no standalone components here. It’s for a Vue js app.

  <div v-for="(screw, index) in form.screws " class="screw-module">
    <input type="radio" name="screws[index][prop1]" v-model="screws[index].prop1" id="prop1" value="prop1">
    <input type="radio" name="screws[index][prop2]" v-model="screws[index].prop2" id="prop2" value="prop2">
    <input type="radio" name="screws[index][prop3]" v-model="screws[index].prop3" id="prop2" value="prop3">
  </div>

Now please focus on name="screws[index][thread]". What I need as the rendered html name value, is:

// iteration 1
name="screws[0][prop1]"
name="screws[0][prop2]"

// iteration 2
name="screws[1][prop1]"
name="screws[1][prop2]"

And so on… What’s the proper syntax?

The v-bind directive will allow you to use any valid JS expression for attributes. In this case, if I am understanding your desired outcome correctly, you would just need to change name to v-bind:name or :name.

I answer by myself: the proper syntax is

:name=" 'screws[' + index + '][prop1]' "

1 Like

It is just js, so you can '`screws[${index}][prop1]`'

That syntax is not supported by IE.