Добавление индекса в класс vuejs

Question

Я потратил на это несколько часов и продвинулся немного дальше, чем ожидал.Но это похоже на контрольно-пропускной пункт.

Это для формы инвентаря.Пока что все работает правильно.В простом виде новое поле будет добавлено для каждого товара на складе.Теперь пользователь может выбрать цвет, добавить количество и комментарий.

Проблема в том, что я не могу понять, как добавить значение индекса в класс.Я могу получить значение индекса внизу, но теперь, когда я добавляю его в класс.

Мои другие входные данные выглядят так.

<input type="text" name="option[1][option_name]" class="form-control" id="example" value="blue">

Однако, когда я генерирую их, они появляются так, что я не могу понять, как добавить индекс к имени.Любая помощь приветствуется.

<input type="text" name="option[{{ index }}][quantity]">

https://codepen.io/virgiltu/pen/gqBwwj

Answer 1

Просто свяжите атрибут (с v-bind:name или :name) и используйте литералы шаблона:

<input type="text" :name="`option[${index}][${option_name}]`" class="form-control" id="example" value="blue">