![](/img/trans.png)
[英]Pass arguments *and* clicked value with @change in bootstrap vue's <b-form-radio-group> element
[英]How can I use multiple b-form-radio-group avoiding visual interference among them?
我是使用 Vue 尤其是 Bootstrap Vue 的新手,我正在尝试构建一个包含多个无线电组的表单。
我的问题是,当我更改其中一个值时,其他值不会更改它们的值(已使用 Vue DevTools 进行了检查),但从视觉上看,似乎没有选择任何值
我不知道我的方法有什么问题
我在这里发布了代码的简化版本以寻求帮助,在此先感谢:
<template>
<div>
<b-form-group label="Radio group 1" v-slot="{ ariaDescribedby }">
<b-form-radio-group
id="radio-group-1"
v-model="selected1"
:options="options1"
:aria-describedby="ariaDescribedby"
name="radio-options"
></b-form-radio-group>
</b-form-group>
<b-form-group label="Radio Group 2" v-slot="{ ariaDescribedby }">
<b-form-radio-group
id="radio-group-2"
v-model="selected2"
:options="options2"
:aria-describedby="ariaDescribedby"
name="radio-options"
></b-form-radio-group>
</b-form-group>
</div>
</template>
<script>
export default {
data() {
return {
selected1: 'first',
options1: [
{ text: 'First', value: 'first' },
{ text: 'Second', value: 'second' },
],
selected2: 'one',
options2: [
{ text: 'One', value: 'one' },
{ text: 'Two', value: 'two' },
]
}
}
}
</script>
由于两个<b-form-radio-group>
元素具有相同的名称“radio-options”,因此在视觉上它们被视为一组。 不同的v-model
仍然会正确地 function 但这不是你想要的视觉效果。 给第二组一个不同的名字:
<b-form-radio-group
id="radio-group-2"
v-model="selected2"
:options="options2"
:aria-describedby="ariaDescribedby"
name="radio-options2"
></b-form-radio-group>
在这里,我将其更改为radio-options2
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.