Bootstrap Vue Checkbox: How to check/uncheck checkbox when clicking another element

Question

I read the docs yet I can't find any example of a bootstrap vue checkbox being set to check/unchecked when clicking a table row (when it is underneath a table). Is there a way that clicking a row will result to it being checked/unchecked?

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>

Edit: I already manipulated the v-model bind to the checkbox. Still doesn't work.

Typically, you'd just toggle the value that the checkbox is bound to (its v-model). What does your code look like? — Phil
Edited. I just didn't post the code because I assumed this is the default behavior of the checkbox on bootstrap vue where the changes on the model isn't 2 way binding which was confirmed on my code. I also notice that setting the default values to true doesn't set the checkbox to checked. — The Bassman
Adding new properties to your objects defined in data() (ie this.form.optional[relatedId] = !val) is not reactive. See vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats — Phil

The Bassman The Bassman · Accepted Answer · 2018-10-16T03:10:29

I added this on my code on my created hook:

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

to set the form.optional to reactive..

Bootstrap Vue Checkbox: How to check/uncheck checkbox when clicking another element

2 Answers