Vue 3v-用于动态单选按钮

Question

我正在创建一个在线的多选择考试，为什么当我使用v动态创建单选按钮时，用户有能力选择多个按钮？我希望用户一次只能选择一个按钮。当前，用户必须取消选择原始选项，然后选择另一个按钮。

这是我的代码：

            <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"/>