Question

我阅读了docs，但找不到任何示例，例如，单击表行时（位于表下方），引导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模型绑定到复选框。仍然不起作用。

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"

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

2 个答案: