2š
ā
I have assembled a complete example. (I donĀ“t know anything about your language.data
object so IĀ“m just using fake data).
<template>
<div>
<!-- Your Checkboxes -->
<table>
<tr v-for="(keyTransPair, index) in language.data">
<td id="selection"><input type="checkbox" :value="keyTransPair" :id="index" v-model="checkedPhrasesArr"></td>
<td>{{index}}</td>
</tr>
</table>
<!-- Show the selected boxes -->
{{ checkedPhrasesArr }}
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
// Your language data
language: {
data: {
keyOne: "one",
keyTwo: "two",
keyThree: "three"
}
},
// The Checkbox data
checkedPhrasesArr: []
}
}
}
</script>
Note that the checkbox values are bound with :value="keyTransPair"
. You can change the value to anything you want. This value will be added to the array if the checkbox is checked.
By the way: You use <td id="selection">
within the v-for
loop. So the id āselectionā will not be unique. You should better use a class instead of an id here.
š¤Sebastian
Source:stackexchange.com