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

Posted 2023-02-23

【中文标题】如何使用多个 b-form-radio-group 避免它们之间的视觉干扰？

【英文标题】：How can I use multiple b-form-radio-group avoiding visual interference among them?

【发布时间】：2021-04-29 14:32:28

【问题描述】：

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

【问题讨论】：

您在选择其中任何一个时都没有看到选中的蓝色圆点？

是的，当我在第一个中选择一个值时，蓝色选定的点是可见的，但如果我选择第二个单选组中的一个，第一个中的蓝点会消失。

【参考方案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。