I am working on a crud operation with vue js and laravel. Everything works fine but I am thinking of a small improvement to make the site more user friendly. So where i click edit button all my inputs have they old value (fetched from laravel) except selected options. They do not update with the corresponding values from the db and when i edit an record this is a problem . How can i set old value or coresponding value on this option

form select for my options

<div >  
   <label  for="team_foreman">Team Skill</label>
     <select v-model="edit_team_skills"  id="team_foreman" >
        <option v-if="!skills.length"  disabled>No data to show</option>
        <option v-for="skill in skills" :value="skill.id" :key="skill.id" >{{skill.skills_name}}</option>
     </select>
</div>

vue data

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

//edit method 
editTeam(id) {
   axios.get('/teams/' id '/edit')
   .then(response => {
     // console.log(response.data.teams.skills)
      this.id = response.data.teams.id,
      this.edit_team_name = response.data.teams.team_name
      .....
      this.edit_team_skills = response.data.teams.skills
     })
  },

laravel edit controller

public function edit($id)
    {
        $teams = Team::with('skills')->find($id);

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

CodePudding user response：

The v-model of the select should be an array of active option values, as you fill those with the id of the skill you should make this.edit_team_skills an array of id's.

this.edit_team_skills = response.data.teams.skills.map(skill => skill.id)