Javascript 如何使用多个b-form-radio-group避免它们之间的视觉干扰？

我刚刚使用Vue，特别是引导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>

导出默认值{
数据（）{
返回{
已选择1:'第一'，
选项1：[
{text:'First'，value:'First'}，
{文本：'Second'，值：'Second'}，
],
已选择2:'一'，
选项2：[
{文本：'1'，值：'1'}，
{文本：'Two'，值：'Two'}，
]
}
}
}

由于两个

元素具有相同的名称“radio options”，因此在视觉上它们被视为一个组。不同的

v-model

仍能正常工作，但这不是您想要的视觉效果。为第二个组指定一个不同的名称：

---

在这里，我将其更改为

radio-options 2

您在选择任何一个选项时都看不到蓝色选中的点吗？是的，当我在第一个选项中选择一个值时，蓝色选中的点可见，但如果我选择第二个无线电组中的一个，第一个选项中的蓝色点将消失。