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><br> import { ref } from '<a style="color:#f60; text-decoration:underline;" title= "vue"href="https://m.php.cn/zt/15721.html" target="_blank">vue'<br> const users = [<br> { id: 1, name: '张三', role: 'admin' },<br> { id: 2, name: '李四', role: 'editor' },<br> { id: 3, name: '王五', role: 'viewer' }<br> ]<br> const selectedId = ref(2) // 默认选中李四<br> const selectedUser = ref(users.find(u => u.id === selectedId.value))<br> // 当 selectedId 变化时，可同步更新 selectedUser<br> </script>

模板中：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

type="radio"
:id="`user-${user.id}`"
:value="user.id"
v-model="selectedId"
>
{{ user.name }} ({{ user.role }})

当前选中：{{ selectedUser }}

为什么不能直接 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 }}，且响应式更新。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！