Currently in the process of learning Vue.js, I've encountered a small problem: I have a single file component containing an array of checkboxes. While referring to the documentation on working with multiple checkboxes, I found that the provided example requires me to declare:
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
Update: Despite setting this up within the <script> tag of my single file component using data(), it only checks/unchecks all boxes at once (though showing correct true/false feedback):
<script>
export default {
name: 'PhrasesDetail',
data () {
return {
game: '',
language: '',
checkedPhrasesArr: {
el: '#selection',
data: {
checkedPhrasesArr: []
}
}
}
},
...
</script>The issue is, how and where should I declare the checkbox array so that it recognizes/reacts to the individual elements?
These are the checkboxes I'm working with:
<tr v-for="(keyTransPair, index) in this.language.data">
<td id="selection"><input type="checkbox" :id="index" v-model="checkedPhrasesArr"></td>
<td>{{index}}</td>
...
</tr>