update b-form-checkbox in Vue

Question

I have the following inside a :

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

Here is what I am trying to achieve:

1 - table starts with all checkboxes checked: this I can easily achieve through checked="true".

2 - as an example, try to uncheck a random box.

3 - now change the date from the calendar.

4 - here is where my issue starts: once the date is changed, I would like to return all the checkboxes to their initial states, which means that all of them should be checked.

I would like to achieve this through one of these two different ways:

option #1 - is there a way to include in my data items whether a column should be checked or not? This is what I tried to do in the following:


items: [
        {id: 1, check: true,},
        {id: 2, check: true,},
        {id: 3, check: true,},
      ]

but I can't find a way to tell to do that. As an example, I would like to have id: 2 initially set as check: false and the other as check: true. Is that possible?

option #2 - it would be also sufficient if I could somehow just reset all the values to tru once the date changes.

Any ideas?

user_3460080 · Answer

Replace you #cell(check)="row" to #cell(check)="{ item }"

In that way the component receive your item from the table component. Your #cell slot is containing more data such index that neccessery for some else uses.

https://jsfiddle.net/eligiv/eumvgp4s/15/

user_6595551 · Answer

I think there is no need to use watch because it's overhead; you can use @input to detect changes and call the reset method. I added a code snippet for better understanding.

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
      })
    }
  }
});

update b-form-checkbox in Vue

2 Answers