在 Vue 中更新 b-form-checkbox

Question

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

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

这是我想要实现的目标：

1 - table 开始时选中所有复选框：我可以通过 checked="true".

轻松实现这一点

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

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

4 - 我的问题从这里开始：更改日期后，我想 return 将所有复选框恢复到初始状态，这意味着应该选中所有复选框。

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

选项 #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>

组件以这种方式从 table 组件接收您的项目。您的 #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>

在 Vue 中更新 b-form-checkbox

update b-form-checkbox in Vue

javascript

vue.js

bootstrap-vue