bootstrap-vue复选框选择全部或不选择

Question

我正在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

Answer 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>