Is there a way to set the deafault value of a bootstrap checkbox group to true?

Question

I have a checkbox group that contains 21 checkboxes that are bound to an array. Currently they are all unchecked by default, but I would like them all to be checked. Looking at the documentation, it seems like the checked="true" method only works when you use individual checkboxes. How can I accomplish this when it's a checkbox group?

<b-row>
  <b-col lg="2" class="mb-3">
    <b-form-checkbox-group stacked v-if="selectedPropertyId && tableLayout" v-model="visibleFieldKeys" :options="fields.slice(0,7)" text-field="label" value-field="key" inline/>
  </b-col>
  <b-col lg="2" class="mb-3">
    <b-form-checkbox-group stacked v-if="selectedPropertyId && tableLayout" v-model="visibleFieldKeys" :options="fields.slice(7,14)" text-field="label" value-field="key" inline/>
  </b-col>
  <b-col lg="2" class="mb-3">
    <b-form-checkbox-group stacked v-if="selectedPropertyId && tableLayout" v-model="visibleFieldKeys" :options="fields.slice(14,21)" text-field="label" value-field="key" inline/>
  </b-col>
</b-row>

I tried inserting the values manually to the array, which didn't do anything, and it's not exactly pretty code.

visibleFieldKeys: [true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true,]

Answer 1

The issue is that visibleFieldKeys shouldn't contain boolean. But the values of your checkboxes. In this case, that would be the key property from the objects in your fields array.

So you could map your fields and create a new array with all the keys and assign that to visibleFieldKeys

visibleFieldKeys: fields.map(f => f.key]