javascript - 更新 Vue 中的 b-form-checkbox

Question

我有以下<b-form-checkbox>里面 <b-table> :

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/