Vue3 v-for动态生成radio按钮可多选 单选互斥失效问题求助

核心问题是原生HTML radio按钮实现同组互斥单选的必要条件是：同组所有radio必须拥有完全相同的name属性值。你的代码中动态生成的<input type="radio">没有设置统一的name属性，浏览器会把每个radio判定为独立分组，自然不会自动互斥，才会出现可以同时选中多个、需要手动取消原有选中项的异常表现。

除此之外代码还有3个可优化/会引发其他bug的点：

• hover状态的判断逻辑冗余：selectedAnswer == '' || selectedAnswer !== ''是恒成立的表达式，不需要额外写判断，直接绑定对应类名即可
• 直接用选项值value作为input的id：如果不同题目存在相同选项值，会出现页面id重复的问题，不符合HTML规范，点击label时可能触发错误的选项选中
• 选中状态判断和事件处理耦合度高：通过selection方法判断选中样式、用@click手动处理选值，容易出现数据和视图不同步的问题

1. 给同一道题下的所有radio绑定相同的name属性，多题场景下name值要和题目唯一标识（索引/题目id）绑定，避免跨题选项互斥
2. 用v-model做选项值的双向绑定，替代手动操作DOM处理选中状态的逻辑，保证数据视图同步
3. 修正冗余的hover判断、重复id问题，简化选中样式的判断逻辑

<!-- 假设外层是多道题的循环，循环变量为(questionItem, idx) in questionList -->
<label
  v-for="(value, optIndex) in newObject[idx]"
  :key="optIndex"
  class="block mt-4 border border-gray-600 rounded-lg py-2 px-6 text-lg hover:ring-indigo-700 hover:border-indigo-700 cursor-pointer"
  :class="{
    'ring-4 ring-indigo-700 border-indigo-700': selectedAnswers[idx] === value
  }"
>
  <input
    :id="`q_${idx}_opt_${optIndex}`"
    type="radio"
    class="hidden"
    :value="value"
    :name="`question_${idx}`"
    v-model="selectedAnswers[idx]"
    @change="answered(idx, value)"
  />
  {{ value }}
</label>

你需要在组件中定义selectedAnswers变量存储每道题的选中值，以Vue2选项式API为例：

data() {
  return {
    // 按题目数量初始化，初始值为空代表未选
    selectedAnswers: []
  }
},
mounted() {
  // 替换questionCount为你的实际题目总数
  const questionCount = this.newObject.length
  for(let i = 0; i < questionCount; i++) {
    this.selectedAnswers[i] = ''
  }
}

原有的answered方法如果需要做选后回调（比如记录答题时间、实时判分），直接接收题目索引和选中值即可，不需要再手动处理选中状态。

注意：绝对不要给不同题目的radio设置相同的name值，否则会出现跨题目选项互斥的bug，name值带上题目索引/唯一id即可规避这个问题。

内容的提问来源于stack exchange，提问作者Mark McKeon