Vue检查多个单选按钮答案

【问题标题】：Vue check multiple radio buttonsVue检查多个单选按钮
【发布时间】：2020-07-06 11:27:53
【问题描述】：

我正在尝试检查 vue 中的多个单选按钮，但它不起作用。普通 html 允许您检查多个单选按钮，如果名称属性不同但它在 vue 中不起作用

  export default {
    data() {
      return {
        selected: []
      }
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div>
    <b-form-group label="Individual radios">
      <b-form-radio v-model="selected" name="some-radios0" value="A">Option A</b-form-radio>
      <b-form-radio v-model="selected" name="some-radios1" value="B">Option B</b-form-radio>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

所以我更改了名称属性，但它仍然无法正常工作。这太不可能了。

【问题讨论】：

好吧，你应该使用复选框而不是单选按钮...
@Ifaruki 我试过了，得到了这个错误 --> [Vue 警告]: Invalid prop: type check failed for prop "checked"。预期的数组，得到值为“”的字符串。在 ---> 中找到

标签： javascript vue.js vuejs2 vue-component bootstrap-vue

【解决方案1】：

如果你想选中多个复选框，那么你应该使用b-form-checkbox-group

这里是文档的链接：https://bootstrap-vue.js.org/docs/components/form-checkbox

这里是你的代码修改：

<template>
  <div>
    <b-form-group label="Checkboxes">
      <b-form-checkbox-group v-model="selected" name="some-radios">
        <b-form-checkbox value="A">Option A</b-form-checkbox>
        <b-form-checkbox value="B">Option B</b-form-checkbox>
      </b-form-checkbox-group>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
      }
    }
  }
</script>

【讨论】：