如何使用多个b形无线电组以避免它们之间的视觉干扰?

Question

我是新的使用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>

Answer 1

由于两个<b-form-radio-group>元素具有相同的名称"radio-options"，因此在视觉上它们被视为一个组。不同的v-model仍然可以正常工作，但这不是你想要的。给第二组一个不同的名字:

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