How to style checkboxes created in a v-for loop without breaking them?

Question

Vue.js

When styling checkboxes created by the v-for directive, there was a problem: only the first checkbox is activated, no matter which element of the array is clicked on. The original checkboxes work fine. Key added both to the label and to the input, but only the first checkbox still works. What could be the problem?
Example https://jsfiddle.net/rokerok_22/8bowaa8s/

Answer 1

Should it be like this ?
First, the v-for must be on the li element, not the ul element. Secondly, in order to dynamically assign attribute values ​​(you have id and for), you still need to use v-bind, and not just enter a string that matches the index name from v-for.

Answer 2

Your id is repeated, just wrap the input with a label, without using for.