Vue.js2与Laravel联动时编辑下拉框无法回显旧数据问题

问题根源 #

你的下拉选择框option的:value绑定的是skill.id（数字类型），但给v-model绑定的edit_team_skills赋值的是response.data.teams.skills——这是一个完整的关联对象，而非单个ID值。类型和值的不匹配，导致Vue无法找到对应的选项进行选中。

解决方案 #

1. 修正Vue编辑方法的赋值逻辑

将关联对象替换为对象的id属性，确保和下拉选项的value完全一致：

// edit method 
editTeam(id) {
   axios.get('/teams/'+id+'/edit')
   .then(response => {
      this.id = response.data.teams.id,
      this.edit_team_name = response.data.teams.team_name
      // 改为取关联Skill对象的id
      this.edit_team_skills = response.data.teams.skills?.id
     })
  },

注：使用?.可选链操作符是为了避免当skills关联为空时出现报错，若你能确保关联一定存在，可直接写response.data.teams.skills.id。

2. 优化初始数据类型

将edit_team_skills的初始值从空字符串改为null，和数字类型的ID更匹配，避免类型差异导致的匹配问题：

data() {
  return {
    edit_team_skills: null,
  }
}

额外验证建议 #

在editTeam方法里打印response.data.teams.skills，确认返回的是单个对象（而非集合）且包含id字段，确保后端关联关系查询正确：

console.log(response.data.teams.skills)

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