Saya cuba menggunakan kotak semak b-form dengan b-table. Cuba dapatkan semula ID modul yang dipilih.
<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: []
}
Walaupun saya boleh mendapatkan semula ID modul yang dipilih, saya tidak boleh mengalih keluarnya apabila menogol kotak pilihan. Jika sesiapa boleh memberikan idea tentang cara menjejak sama ada kotak semak ditandakan (benar) atau dinyahtandai (salah). Terima kasih terlebih dahulu.
methods: {
selection(item) {
if (true)
app.selected.push(item);
else
app.selected = app.selected.map(x => x != item);
}
}, 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Nilai kotak semak diluluskan
v-model存储在list.modules[].selected中，因此您可以仅使用计算的 prop 来获取所选模块，而不是使用单独的selectedTatasusunan:<b-form-checkbox>中删除@change="selection(⋯)":selection方法和selectedatribut data kerana ia tidak lagi diperlukan.export default { data() { return { // selected: [] // remove } }, methods: { // selection() {⋯} // remove } }list.modules[]:export default { computed: { selected() { return this.list.modules.filter(module => module.selected) }, }, }Demo