dimanche 7 juin 2020

bootstrap-vue checkbox selecting all or none

I am attempting in Vue to create a form s.t. a user can check one or more of a series of stacked checkboxes to select one or more options.

I am currently unable to select/unselect options one by one. I either have to select the entire array or none of them.

Here is my input html:

<b-form-group label="Individual stacked checkboxes (default)">
        <b-form-checkbox
          v-for="option in options"
          v-model="selected"
          :key="option.value"
          :value="option.value"
          name="flavour-3a"
        >
          
        </b-form-checkbox>
      </b-form-group>
      <button class="btn btn-success" @click="assignGroups">Accept Assignments</button>

And here is the data structure:

data() {
    return {
      selected: [],
      options: [
        { item: 'A', name: 'Option A' },
        { item: 'B', name: 'Option B' },
        { item: 'C', name: 'Option C' },
        { item: 'D', name: 'Option D' }
      ],
      notification: {
        message: '',
        type: ''
      }
    };
  },

Here is the documentation I am attempting to follow: https://bootstrap-vue.org/docs/components/form-checkbox




Aucun commentaire:

Enregistrer un commentaire