Как стилизовать чекбоксы созданные в цикле v-for не нарушив их работу?

Question

[rokerok_n]

При стилизации чекбоксов созданных директивой v-for возникла проблема: активируется только первый чекбокс на какой бы элемент массива не нажимали. Оригинальные чекбоксы работают нормально. Key добавлял и к лейблу и к инпуту, но все равно работает только первый чекбокс. В чем может быть проблема?
Пример https://jsfiddle.net/rokerok_22/8bowaa8s/

Answer 1

[0xD34F]

Должно быть так?

Во-первых - v-for должен быть у элемента li, а не ul. Во-вторых - чтобы динамически назначать значения атрибутов (у вас это id и for), надо всё-таки использовать v-bind, а не просто вписывать строку, совпадающую с именем индекса из v-for.

Comments

[rokerok_n]

Благодарю вас за разъяснение! Вы выручаете своими ответами) Теперь все понятно.

Answer 2

[Сергей Лещенко]

У вас id повторяется, просто оберните инпут лейблом, без использования for.