引导Vue复选框<b-table> <b-form-复选框>
引导Vue复选框<b-table> <b-form-复选框>
提问于 2022-03-06 20:16:57
我试图在b表中使用b表单复选框。试图检索选定的模块Ids。
<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: []
}虽然我能够检索选定的模块I，但在切换复选框时无法删除它们。如果有人可以提供如何跟踪复选框是否选中(真)或不选中(假)的想法。提前谢谢。
methods: {
selection(item) {
if (true)
app.selected.push(item);
else
app.selected = app.selected.map(x => x != item);
}
},回答 1
Stack Overflow用户
回答已采纳
发布于 2022-03-06 22:11:49
复选框值已经通过list.modules[].selected存储在v-model中，因此您可以只使用计算的支柱来获取选定的模块，而不是使用单独的selected数组：
- 从
@change="selection(⋯)"中删除<b-form-checkbox>
<!--
<b-form-checkbox
v-model="row.item.selected"
@change="selection(row.item.moduleId)" // remove
>
-->
<b-form-checkbox
v-model="row.item.selected"
>- 删除
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)
},
},
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71376359
复制相关文章
点击加载更多
相似问题
DTS无法将datetime2转换为datetime
Pandas:将字符串转换为datetime.datetime
使用Pandas将字符串转换为datetime
无法使用pandas to_datetime方法将字符串转换为datetime数据类型
我无法将Pandas Dataframe类型转换为datetime
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
