Vue.js使用v-for渲染单选框时v-model无法正常绑定的问题

AI 小北

2026-11-2

单选框绑定失效的排查&修复方案

指令书写错误（最高概率问题）
代码中使用的v-value="item.key"不属于Vue内置合法指令，无法被框架识别。静态编码时的value="CODE001"是给input设置原生属性，动态渲染场景下的正确属性绑定写法为v-bind缩写:value，直接将v-value替换为:value即可解决属性不生效的问题。
字段名匹配校验
接收接口返回的codeObsTypeList数据后，在赋值阶段打印遍历项的实际结构，确认代码中引用的item.key、item.txt与接口返回字段名完全一致：
```
// 数据赋值阶段执行打印
console.log('字典列表结构', this.codeVo.codeObsTypeList)
```
通用字典接口通常返回value（存储编码如CODE001/002/003）、label（存储展示文案如A/B/C）字段，若代码中引用不存在的key、txt字段，最终绑定到radio的value会为undefined，无法与userParam.prdtType的值匹配形成选中态。
响应式链路校验
确认userParam.prdtType为data初始化阶段就声明的属性，而非异步获取数据后动态挂载到userParam对象上的属性——Vue2响应式系统无法监测对象新增属性，会直接导致绑定失效。当前代码中已在data提前初始化userParam: { prdtType: '' }，只要没有对userParam做无响应的整体替换，这部分逻辑符合要求。

修复后参考代码

<td>
  <label 
    class="radio_custom" 
    v-for="(item, index) in codeVo.codeObsTypeList" 
    :key="index"
  >
    <input 
      type="radio" 
      v-model="userParam.prdtType" 
      :value="item.对应编码的接口字段名"
    >
    <i></i>
    <span class="txt">{{ item.对应展示文案的接口字段名 }}</span>
  </label>
</td>