Vue检查多个单选按钮

Question

我试图检查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>

所以我更改了名称属性，但它仍然不起作用。这不太可能。

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