使用v-for渲染单选框时无法设置默认选中状态

我碰到过好几次这种问题啦，其实核心是Vue处理表单元素选中状态的逻辑和原生有点不一样，尤其是在循环渲染的时候，直接用:checked经常会踩坑。下面给你拆解原因和解决方案：

问题根源 #

Vue推荐使用v-model来绑定表单元素的状态，而不是手动操作:checked属性。当你在v-for循环里同时使用v-model和:checked时，v-model会接管选中状态，手动设置的:checked会被忽略；就算没加v-model，循环生成的元素因为DOM复用等原因，也可能导致:checked的判断无法正确响应。

正确解决方案 #

用v-model绑定一个响应式变量，配合:value给每个单选框设置唯一值，初始化绑定变量为你想要默认选中的值即可：

模板代码示例 #

<div class="props-data">
  <!-- 循环渲染单选框 -->
  <input 
    type="radio" 
    v-for="(item, index) in stepList" 
    :key="index"  <!-- 必须加唯一key，避免DOM复用问题 -->
    v-model="currentSelectedStep" 
    :value="item.step"  <!-- 每个单选框对应的值 -->
    :id="`step-${index}`"
  >
  <label :for="`step-${index}`">{{ item.label }}</label>
</div>

脚本代码示例 #

export default {
  data() {
    return {
      currentSelectedStep: 1, // 初始化默认选中step为1的选项
      stepList: [
        { step: 1, label: "第一步" },
        { step: 2, label: "第二步" },
        { step: 3, label: "第三步" }
      ]
    };
  }
};

为什么之前的写法无效？ #

1. 如果你同时用了v-model和:checked，Vue会优先处理v-model，手动设置的:checked会被覆盖；
2. 单独用:checked="index == 1"时，循环生成的元素可能因为Vue的DOM复用策略，导致选中状态没有正确更新；
3. :checked="{ index == 1 }"这种写法是错误的，:checked需要接收布尔值，而不是对象，所以肯定无效。

额外注意点 #

• 确保v-for的key是唯一且稳定的（最好用数据的唯一ID，而不是index，避免数据顺序变化时DOM异常）；
• 所有单选框的name属性如果需要分组的话可以统一设置，不过Vue的v-model已经会自动处理同组的单选框互斥逻辑。

内容的提问来源于stack exchange，提问作者Aalind Sharma