I'm trying to use b-form-checkbox with b-table. Try to retrieve the selected module ID.
<b-table
id="module-table"
:items="list.modules"
:fields="fields"
:busy="isBusy">
<template slot="num" slot-scope="row">
{{ row.index + 1 }}
</template>
<template slot="checkbox" slot-scope="row">
<b-form-group>
<b-form-checkbox v-if="!isLoading" v-model="row.item.selected" @change="selection(row.item.moduleId)" variant="outline-secondary" class="mr-1">
</b-form-checkbox>
</b-form-group>
</template>
</b-table>
data: {
fields: [
{ key: 'checkbox', label: '', class: 'd-none d-lg-table-cell' },
{ key: 'num', label: 'Num', class: 'd-none d-lg-table-cell' },
],
selected: []
}
While I am able to retrieve the selected module IDs, I cannot remove them when toggling the checkbox. If anyone could provide an idea on how to track whether a checkbox is checked (true) or unchecked (false). Thanks in advance.
methods: {
selection(item) {
if (true)
app.selected.push(item);
else
app.selected = app.selected.map(x => x != item);
}
}, 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The checkbox value is already stored in
list.modules[].selectedviav-model, so you can just use the calculated prop to get the selected module instead Instead of using a separateselectedarray:<b-form-checkbox>@change="selection(⋯)":selectionmethod and theselecteddata attribute as they are no longer needed.export default { data() { return { // selected: [] // remove } }, methods: { // selection() {⋯} // remove } }list.modules[]:export default { computed: { selected() { return this.list.modules.filter(module => module.selected) }, }, }Demo