Ich versuche, die B-Form-Checkbox mit der B-Tabelle zu verwenden. Versuchen Sie, die ausgewählte Modul-ID abzurufen.
<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: []
}
Während ich die ausgewählten Modul-IDs abrufen kann, kann ich sie nicht entfernen, wenn ich das Kontrollkästchen aktiviere. Könnte mir jemand eine Idee geben, wie man nachverfolgen kann, ob ein Kontrollkästchen aktiviert (wahr) oder deaktiviert (falsch) ist? Dank im Voraus.
methods: {
selection(item) {
if (true)
app.selected.push(item);
else
app.selected = app.selected.map(x => x != item);
}
}, 
复选框值已通过
v-model存储在list.modules[].selected中，因此您可以仅使用计算的 prop 来获取所选模块，而不是使用单独的selected数组：<b-form-checkbox>中删除@change="selection(⋯)":selection方法和selected数据属性，因为不再需要它们。export default { data() { return { // selected: [] // remove } }, methods: { // selection() {⋯} // remove } }list.modules[]中选定的模块：export default { computed: { selected() { return this.list.modules.filter(module => module.selected) }, }, }演示