Question

我目前正在尝试向此Vue Bootstrap表单复选框组添加换行符。 Vue Bootstrap文档（https://bootstrap-vue.js.org/docs/components/form-checkbox/）的示例说明了如何创建全选复选框组，但它们却紧密地分组在一起（没有换行符）。有没有一种方法可以在flavors数组中添加一个换行符来分隔每个对象？

我尝试在div标签上使用v-html并将其加载到flavors数组中，但是结果不正确。我也尝试了：style =“ {marginBottom：'25px'}”，它也没有用，整个数组组都在页面中上下移动。在那之后我没有理想。

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>

Answer 1

不要使用options数组。在<b-form-checkbox>组内将每个选项作为自己的<b-form-checkbox>呈现，并在每个<b-form-checkbox>上添加类mb-1，mb-2，mb-3， mb-4或mb-5（这些是边距底部spacing helper classes）。

<b-form-checkbox-group
  id="flavors"
  v-model="selected"
  name="flavors"
  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>

有没有一种方法可以在b-form-checkbox-group中添加换行符？

1 个答案: