VueJS 2编辑请求时如何保留下拉框的旧选中值？

问题场景 #

后端通过Laravel查询带关联的团队数据：

$teams = Team::with('skills')->find($id);

return response()->json([
    'teams' => $teams,
], Response::HTTP_OK);

前端使用Vue编辑团队信息时，team_name可通过v-model正常回显，但技能下拉框无法保留原选中值：

editTeam(id) {
    axios.get('/teams/' + id + '/edit')
    .then(response => {
        this.id = response.data.teams.id,
        this.edit_team_name = response.data.teams.team_name
        // 此处赋值方式错误，导致下拉框无法选中旧值
        this.edit_team_skills = response.data.teams.skills 
    })
},

编辑模态框的下拉框代码：

<div class="form-group">  
    <label class="form-label select-label" for="team_foreman">Team Skill</label>
    <select v-model="edit_team_skills" class="form-select" id="team_foreman">
        <option v-for="skill in skills" :value="skill.id" :key="skill.id">{{skill.skills_name}}</option>
    </select>
</div>

核心原因 #

下拉框的v-model绑定的是技能的ID（因为<option>的:value="skill.id"），但当前赋值的是整个skills关联对象/集合，数据类型不匹配，导致无法触发选中状态。

需要根据Team与Skill的关联关系调整赋值逻辑：

解决方案 #

1. 一对一关联（一个团队对应一个技能） #

如果Team和Skill是一对一关联，response.data.teams.skills是单个Skill对象，直接提取其ID赋值：

// 提取关联技能的ID，用可选链避免空值报错
this.edit_team_skills = response.data.teams.skills?.id;

2. 一对多关联（一个团队对应多个技能） #

如果是一对多关联，response.data.teams.skills是数组/集合，分两种场景处理：

• 单选场景：取第一个关联技能的ID（根据业务需求调整）

  this.edit_team_skills = response.data.teams.skills[0]?.id;
  

• 多选场景：将select改为多选模式，同时绑定数组存储多个技能ID
  先修改HTML：

  <select v-model="edit_team_skills" class="form-select" id="team_foreman" multiple>
      <option v-for="skill in skills" :value="skill.id" :key="skill.id">{{skill.skills_name}}</option>
  </select>
  

  再调整JS赋值逻辑，提取所有关联技能的ID组成数组：

  this.edit_team_skills = response.data.teams.skills.map(skill => skill.id) || [];
  

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