更新Vue中的b-form-checkbox

Question

我在<b-table>:中有以下<b-form-checkbox>

https://jsfiddle.net/fmattioni/L269rd7s/

以下是我正在努力实现的目标：

1-表从选中所有复选框开始：这一点我可以通过checked="true"轻松实现。

2-例如，尝试取消选中一个随机框。

3-现在更改日历中的日期。

4-这是我的问题开始的地方：一旦日期更改，我想将所有复选框返回到它们的初始状态，这意味着所有复选框都应该被选中。

---

我想通过以下两种不同的方式之一实现这一点：

• 选项#1-有没有办法在我的数据items中包括是否应该检查列？这就是我试图在以下方面做到的：

items: [
{id: 1, check: true,},
{id: 2, check: true,},
{id: 3, check: true,},
]

但我找不到方法让<b-form-checkbox>这么做。例如，我希望id: 2最初设置为check: false，另一个设置为check: true。这可能吗？

• 选项#2-如果我能在日期更改后以某种方式将所有值重置为tru，那就足够了

有什么想法吗？

Answer 1

将#cell(check)="row"替换为#cell(check)="{ item }"

<div id="app">
<div>
<b-form-datepicker
value='2021-04-25'
>
</b-form-datepicker>
<b-table
:items='items'
>
<template #cell(check)="{ item }">
<b-form-checkbox
v-model="item.check"                 
>
</b-form-checkbox>
</template>
</b-table>
</div>
</div>

通过这种方式，组件从表组件接收您的项目。您的#cell插槽包含更多的数据，如index，这些数据需要用于其他用途。

https://jsfiddle.net/eligiv/eumvgp4s/15/

Answer 2

我认为没有必要使用watch，因为这是开销；您可以使用@input来检测更改并调用重置方法。为了更好地理解，我添加了一个代码片段。

new Vue({
el: "#app",
data() {
return {
date: new Date(),
items: [{
id: 1,
check: true,
},
{
id: 2,
check: false,
},
{
id: 3,
check: true,
},
]
}
},
methods: {
reset_checkboxes() {
this.items.forEach((el) => {
el.check = true
})
}
}
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
<b-form-datepicker @input="reset_checkboxes" v-model='date'>
</b-form-datepicker>
<b-table :items='items'>
<template #cell(check)="{ item }">
<b-form-checkbox v-model="item.check" />
</template>
</b-table>
</div>