Vue3中v-select存储chamber_id时编辑回显location的实现方法

v-select 组件默认通过全等规则匹配选中项，现有代码仅指定了选项显示字段为 location，未指定选项的取值字段，组件无法将 v-model 绑定的纯数字类型 chamber_id 和 chambers 数组中的 chamber 对象做关联匹配，因此直接渲染数据库存储的原始 id 数值。

保持现有 v-model 绑定 chamber_id 的逻辑不变（无需修改后端存储结构，也不需要将完整 chamber 对象存入表单数据），给组件补充 item-value 属性，指定选项的匹配取值字段为 id 即可：

<!-- Vuetify 3.x 版本写法 -->
<v-select
    v-model="schedule.chamber_id"
    :options="chambers"
    item-title="location"
    item-value="id"
></v-select>

<!-- Vuetify 2.x 版本写法 -->
<v-select
    v-model="schedule.chamber_id"
    :options="chambers"
    label="location"
    item-value="id"
></v-select>

• 确保选项加载时序正确：编辑模式下需要等 chambers 数组加载完成后，再给 schedule.chamber_id 赋值，或者直接加渲染判断，等选项列表加载完再渲染组件，避免组件初始化时拿不到选项导致匹配失败：

<v-select
    v-if="chambers.length"
    v-model="schedule.chamber_id"
    :options="chambers"
    item-title="location"
    item-value="id"
></v-select>

• 保证值类型一致：如果接口返回的 schedule.chamber_id 是字符串类型（例如 "3"），需要先转为数字类型，和 chambers 数组中对象的 id 字段类型保持一致，否则全等匹配会失效。
• 不要开启 return-object 属性：开启后 v-model 会绑定完整的 chamber 对象，提交表单时还需要额外提取 id 字段传给后端，增加不必要的逻辑。

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