Как интерполировать индекс по шаблонам списков html Vue?

Question

пожалуйста, посмотрите на следующий код. Он написан прямо на странице html, поэтому здесь нет отдельных компонентов. Это приложение для Vue js.

  <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>

Теперь, пожалуйста, сосредоточьтесь на name="screws[index][thread]". То, что мне нужно в качестве отображаемого html значения имени, это:

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

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

И так далее. Какой правильный синтаксис?

Answer 1

Для этого вы можете использовать интерполяцию строк

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