CODEWITHSUNDEEP
javascriptformsvue.jsvuejs2
Luca Reghellin
Luca Reghellin

Reputation: 8101

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?

Upvotes: 0

Views: 451

Answers (1)

Nafees Anwar
Nafees Anwar

Reputation: 6598

You can use string interpolation for this

<input type="radio" :name="`screws[${index}][prop3]`">

Upvotes: 2

Related Questions