Vue 3 v-for 動態單選按鈕

Question

我正在創建一個在線多項選擇題考試，但我無法弄清楚為什么當我使用 v- 動態創建單選按鈕時，用戶可以使用 select 多個按鈕？ 我希望用戶一次只能按一個按鈕 select。 目前，用戶必須取消選擇原始選項，然后再按 select 另一個按鈕。

這是我的代碼：

            <label
            v-for="(value, index) in newObject[idx]"
            :key="index"
            class="block mt-4 border border-gray-600 rounded-lg py-2 px-6 text-lg"
            :class="
             {
            'hover:ring-indigo-700 hover:border-indigo-700 cursor-pointer':
                selectedAnswer == '' || selectedAnswer !== '',
             },  
             {
             'ring-4 ring-indigo-700 border-indigo-700': selection(
                answersArray,
                value
                ),
                }
                "
              >
                <input
                  :id="value"
                  type="radio"
                  class="hidden"
                  :value="value"
                  @click="answered($event)"
                />
                {{ value }}
              </label>

請暫停。

Answer 1

您必須為這些單選按鈕指定相同的名稱。 這將使它們成為一組的一部分，並且一次只能選擇一個單選按鈕。

<input name="abc" type="radio"/>