<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