여러 개의 b-form-radio-group을 사용하여 이들 사이의 시각적 간섭을 피하려면 어떻게 해야 하는가?

여러 개의 b-form-radio-group을 사용하여 이들 사이의 시각적 간섭을 피하려면 어떻게 해야 하는가?

나는 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>원소들은 "라디오 방송"이라는 같은 이름을 가지고 있고 시각적으로 그것들은 한 그룹처럼 취급된다.다른 것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.

참조URL: https://stackoverflow.com/questions/65890655/how-can-i-use-multiple-b-form-radio-group-avoiding-visual-interference-among-the