Vue中绑定对象的select下拉框不生效问题求助

核心原因 #

Vue 中使用 v-model 绑定对象类型的 <select> 选项时，是通过对象引用相等来匹配选中项的，而非对象的内容（比如id）相等。如果你的 dAppt.User 和 users 数组中的对象不是同一个引用（比如是后端返回的新对象、手动创建的对象），哪怕内容完全一致，Vue 也无法识别为匹配的选项，导致下拉框无法正常选中。

具体修复步骤 #

1. 修正默认选项的 value 值 #

第一个下拉框的默认选项写的是 value="{}"，这会将值设置为字符串 "{}"，而非空对象，和后续的对象类型不匹配，改为绑定空对象或 null：

<option disabled selected :value="null">Choose an Employee</option>

2. 确保 dAppt.User 是 users 数组中的引用 #

初始化或更新 dAppt.User 时，不要直接赋值外部对象，而是从 users 数组中找到对应项的引用赋值：

// 示例：初始化时匹配用户
const targetUserId = this.dAppt.User.id.trim()
const matchedUser = this.users.find(u => u.id.trim() === targetUserId)
if (matchedUser) {
  this.dAppt.User = matchedUser
}

这样 dAppt.User 和下拉框选项中的对象是同一个引用，Vue 就能自动匹配选中。

3. 优化 v-for 的 key 值 #

不要直接用对象作为 key（:key="u"），改用唯一的原始类型值（比如用户id），避免渲染异常：

<option v-for="(u, idx) in users" :key="u.id" :value="u">
  {{ u.getFullName() }}
</option>

4. 移除手动操作DOM的代码 #

只要引用匹配，v-model 就能自动处理选中状态，不需要通过 $refs 手动设置，删掉你尝试的那段循环设置代码即可。

补充说明 #

你之前手动设置 selectedIndex 或 value 无效的本质原因，还是因为 dAppt.User 和选项中的对象不是同一个引用。哪怕索引计算正确，select 元素也无法将一个外部对象和选项内的对象视为同一个值。

内容的提问来源于stack exchange，提问作者Michael Clovis