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
– Phil, Commented Oct 16, 2018 at 2:46
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
– The Bassman, Commented Oct 16, 2018 at 2:53
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
– Phil, Commented Oct 16, 2018 at 2:54

The Bassman · Accepted Answer · 2018-10-16 03:10:29Z

2

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..

answered Oct 16, 2018 at 3:10

The Bassman

2,3816 gold badges30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chinhfong Hang · Accepted Answer · 2020-09-25 01:41:49Z

0

just make sure you put the prop

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

answered Sep 25, 2020 at 1:41

Chinhfong Hang

1

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related