如何使用多個 b-form-radio-group 避免它們之間的視覺干擾？

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仍然會正確地 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 。