<template> <table> <tr> <th>Checkbox</th> <th>File</th> <th>Name</th> </tr> <tr v-for="(row, i) in accountsToAssign" :key="row[i]"> <td><v-checkbox @change="checkBoxes(row.id)" /></td> <td>{{ row.filenumber }}</td> <td>{{ row.name }}</td> </tr> </table> </template> <script> export default { data() { return { selectedAccounts: [], } } methods: { checkBoxes(value) { console.log(value); if (this.selectedAccounts.includes(value)) { console.log("remove " + value); this.selectedAccounts = this.selectedAccounts.filter((item) => { return item !== value; }); } else { console.log("add " + value); this.selectedAccounts.push(value); } console.log(this.selectedAccounts); }, } } </script>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter