Currently, I am working on creating a checkbox list based on an array within the `data()` section of my code. However, I am encountering two main issues.
1. The problem is that I am only able to select the first checkbox. When I attempt to select any other checkboxes, the value only changes for the first checkbox in the list.
2. Another issue I am facing is that I am unable to get the `@change` function to trigger when I change the value of a checkbox.
<template>
...
<slot
v-for="(term, index) in termos"
v-bind="term"
>
<generic-check-box
class="terms"
input-id="termos[index].id"
v-model="termos[index].term"
:value="termos[index].term"
@change="checkBoxChanged(index)"
>
<generic-text
color="gray"
class="condition"
>{{ termos[index].message }}
</generic-text>
</generic-check-box>
</slot>
</template>
<script>
export default {
components: {
'close-button': CloseButton,
'generic-button': GenericButton,
'generic-check-box': GenericCheckBox,
'generic-combo-box': GenericComboBox,
'generic-title': GenericTitle,
'generic-text': GenericText,
'off-canvas-buttons': OffCanvasButtons
},
data () {
return {
termos: [
{ id: 0, term: true, message: 'Message 1' },
{ id: 1, term: false, message: 'Message 2' },
{ id: 2, term: false, message: 'Message 3' },
{ id: 3, term: false, message: 'Message 4' }
]
}
},
methods: {
checkBoxChanged (index) {
console.log('checkBoxChangled: ' + index + ' ' + this.termos[index].term)
}
}
}
</script>
https://i.sstatic.net/J8IJ1.png
EDIT