小编dac*_*acD的帖子

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

我尝试在 div 标签上使用 v-html 并加载到flavors 数组中，但没有得到正确的结果。我也尝试过 :style="{marginBottom:'25px'}" 但它也不起作用，整个数组组一起在页面上上下移动。从那以后我就失去了理想。

超文本标记语言

<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 { …