v-model在单选框中不能直接绑定对象，必须通过唯一标识（如id）绑定selectedId，再用computed或find根据id获取对应对象；因Vue底层用===比较引用，对象无法相等。
v-model 在单选框中绑定对象数据时，核心不是直接绑定整个对象，而是让 v-model 指向一个能唯一标识选项的字段（比如 id 或 value），再通过 :value 将每个 radio 关联到对应对象。Vue 本身不支持 v-model 直接绑定对象引用进行选中判断，因为底层依赖的是 === 或 == 比较 —— 而两个结构相同但内存地址不同的对象永远不相等。
单选框中用对象数据的正确做法
你需要把“选中状态”映射为某个可比的值（通常是字符串或数字 ID），而不是对象本身：
- 定义一个响应式变量（如
selectedId）来存储当前选中的项的唯一标识 - 每个
<input type="radio">使用:value绑定对应对象的id（或其他唯一 key） - 用
v-model绑定到selectedId，Vue 会自动比对并设置checked - 需要对象详情时，通过
selectedId查找原始数组中的完整对象
示例代码
假设你有一组用户选项：
<script setup>import { ref } from 'vue'
const users = [
{ id: 1, name: '张三', role: 'admin' },
{ id: 2, name: '李四', role: 'editor' },
{ id: 3, name: '王五', role: 'viewer' }
]
const selectedId = ref(2) // 默认选中李四
const selectedUser = ref(users.find(u => u.id === selectedId.value))
// 当 selectedId 变化时，可同步更新 selectedUser
</script>
模板中：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
<div v-for="user in users" :key="user.id"><input
type="radio"
:id="`user-${user.id}`"
:value="user.id"
v-model="selectedId"
>
<label :for="`user-${user.id}`">{{ user.name }} ({{ user.role }})</label>
</div>
<p>当前选中：{{ selectedUser }}</p>
为什么不能直接 v-model="selectedUser"
如果写成 v-model="selectedUser" 并给每个 radio 的 :value 传整个对象，会出现：
- 初始渲染时所有 radio 都未被选中（因为
selectedUser是对象，而每个:value也是新对象，引用不同） - 点击后赋值的是一个新对象，但下次比对仍失败，无法维持选中态
- 违背 Vue 对
radio的设计机制：它只认原始值比较，不深比较对象
进阶：封装为可复用逻辑
若频繁使用，可封装一个计算属性或组合函数：
const selectedUser = computed(() =>users.find(u => u.id === selectedId.value) || null
)
这样模板里可直接显示 {{ selectedUser?.name }}，且响应式更新。
