bootstrap-vue 复选框选择全部或无答案

【问题标题】：bootstrap-vue checkbox selecting all or nonebootstrap-vue 复选框选择全部或无
【发布时间】：2020-09-26 14:09:31
【问题描述】：

我正在尝试在 Vue 中创建一个表单 s.t.用户可以选中一系列堆叠复选框中的一个或多个以选择一个或多个选项。

我目前无法一一选择/取消选择选项。我要么必须选择整个数组，要么都不选择。

这是我输入的 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"
        >
          {{ option.name }}
        </b-form-checkbox>
      </b-form-group>
      <button class="btn btn-success" @click="assignGroups">Accept Assignments</button>

这是数据结构：

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: ''
      }
    };
  },

这是我试图遵循的文档：https://bootstrap-vue.org/docs/components/form-checkbox

【问题讨论】：

标签： vue.js checkbox bootstrap-vue

【解决方案1】：

key 和 value 属性与您的 option 结构不对应。

您需要将:key="option.value" 更改为:key="option.item" 和:value="option.value" 更改为:value="option.name"

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data() {
    return {
      selected: [],
      options: [{
          item: 'A',
          name: 'Option A'
        },
        {
          item: 'B',
          name: 'Option B'
        },
        {
          item: 'C',
          name: 'Option C'
        },
        {
          item: 'D',
          name: 'Option D'
        }
      ]
    };
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-form-group label="Individual stacked checkboxes (default)">
    <b-form-checkbox v-for="option in options" v-model="selected" :key="option.item" :value="option.name" name="flavour-3a">
      {{ option.name }}
    </b-form-checkbox>
  </b-form-group>
  Selected : {{selected}}
</div>

【讨论】：