Is there a way to add line breaks in b-form-checkbox-group?

Question

I'm currently trying to add line breaks to this Vue Bootstrap form checkbox group. The example that Vue Bootstrap docs (https://bootstrap-vue.js.org/docs/components/form-checkbox/) show how I can create a select all checkboxes group, but they are tightly grouped (without line breaks). Is there a way that I could add a line break within the flavours array to separate each object?

I have tried using v-html on a div tag and load in the flavours array, but it did not have the right outcome. I also tried :style="{marginBottom:'25px'}" and it also didn't work, the entire group of array move up and down the page together. I ran out of ideal after that.

HTML

<template>
  <div>
    <b-form-group>
      <template slot="label">
        <b>Choose your flavours:</b><br>
        <b-form-checkbox
          v-model="allSelected"
          :indeterminate="indeterminate"
          aria-describedby="flavours"
          aria-controls="flavours"
          @change="toggleAll"
        >
          {{ allSelected ? 'Un-select All' : 'Select All' }}
        </b-form-checkbox>
      </template>

      <b-form-checkbox-group
        id="flavors"
        v-model="selected"
        :options="flavours"
        name="flavors"
        class="ml-4"
        aria-label="Individual flavours"
        stacked
      ></b-form-checkbox-group>
    </b-form-group>

    <div>
      Selected: <strong>{{ selected }}</strong><br>
      All Selected: <strong>{{ allSelected }}</strong><br>
      Indeterminate: <strong>{{ indeterminate }}</strong>
    </div>
  </div>
</template>

JavasScript

<script>
  export default {
    data() {
      return {
        flavours: ['Orange', 'Grape', 'Apple', 'Lime', 'Very Berry'],
        selected: [],
        allSelected: false,
        indeterminate: false
      }
    },
    methods: {
      toggleAll(checked) {
        this.selected = checked ? this.flavours.slice() : []
      }
    },
    watch: {
      selected(newVal, oldVal) {
        // Handle changes in individual flavour checkboxes
        if (newVal.length === 0) {
          this.indeterminate = false
          this.allSelected = false
        } else if (newVal.length === this.flavours.length) {
          this.indeterminate = false
          this.allSelected = true
        } else {
          this.indeterminate = true
          this.allSelected = false
        }
      }
    }
  }
</script>

What are you trying to achieve? Every item is already placed on a new line, when i run your code: codepen.io/reijnemans/pen/bGbRVqX?editors=1010 Is the space between the elements not big enough? — dreijntjens
If you want more space between checkboes, place individual <b-form-checkboxes> with a utility spacing class applied to them (i.e. 'mb-2' to set the bottom margin to be a bit bigger) — Troy Morehouse
I want to change the <b-form-checkbox-group> to output each data (i.e., 'Orange,' 'Grape,' 'Apple,' 'Lime,' 'Very Berry') value in one line, then a lot of spacing and then the next value. — dacD

Troy Morehouse Troy Morehouse · Accepted Answer · 2019-09-05T03:27:20

Don't use the options array. Render each option as it's own <b-form-checkbox> inside of the <b-form-checkbox> group, and on each <b-form-checkbox> add the class mb-1, mb-2, mb-3, mb-4, or mb-5 (these are margin bottom spacing helper classes).

<b-form-checkbox-group
  id="flavours"
  v-model="selected"
  name="flavours"
  class="ml-4"
  aria-label="Individual flavours"
  stacked
>
  <b-form-checkbox
    v-for="flavour in flavours"
    :value="flavour"
    class="mb-5"
  >
    {{ flavour }}
  </b-form-checkbox>
</b-form-checkbox-group>

Is there a way to add line breaks in b-form-checkbox-group?

1 Answers