Bootstrap Vue 复选框：如何在单击另一个元素时选中/取消选中复选框

Question

我阅读了文档，但我找不到任何示例，说明在单击表格行（当它位于表格下方时）时，bootstrap vue 复选框被设置为选中/取消选中。 有没有办法点击一行会导致它被选中/取消选中？

data() {
  return {
    form: {
      optional: {} as { [index: string]: boolean },
    }, 
  };
},
methods: {
  triggerCheckBox(relatedId: string) {
    const val = this.form.optional[relatedId];
    this.form.optional[relatedId] = !val;
  },
}

<tr v-for="related in liability.related" @click="triggerCheckBox(related.id)">
  <td>
    <b-form-checkbox
      v-model="form.optional[related.id]"
    </b-form-checkbox>
  </td>

编辑：我已经将 v-model 绑定到复选框。 还是不行。

Answer 1

我在我创建的钩子上的代码中添加了这个：

this.$set(this.form.optional, related.id, false));

将form.optional设置为反应式..

Answer 2

只要确保你把道具

value=true unchecked-value=false
v-model="varaible_of_your"
***"variable_of_your=true or false"