javascript - Vue检查多个单选按钮
问题描述
我正在尝试检查 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>
解决方案
如果你想检查多个复选框,那么你应该使用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>
推荐阅读
- java - 使用 cxf 类创建和填充非常大的自动生成
- sql - 函数式编程和 SQL
- assembly - 等待,组装emu8086
- java - 如何使用@ConversationScoped 处理多个支持 bean?
- r - 将最大的字符串保留在R中的字符串重叠之外
- c++ - nanodbc 从 Linux 连接到 MSSQL
- heroku - 如何在 Twilio 中使用 Heroku Review 应用程序?
- javascript - 显示密码计强度级别
- javascript - 对象键作为车把中的变量(enduro.js)
- android - 折叠 AppBarLayout 不使用 TabLayout 和 NestedScrollView 滚动