Level 35
Does response.data.teams.skills return an array or a value?
Nov 7, 2022
5
Level 4
How can I keep old value selected option on edit request in VueJS 2?
I have some records with relationships on db. I fetch them on laravel backend like this
$teams = Team::with('skills')->find($id);
return response()->json([
'teams' =>$teams,
], Response::HTTP_OK);
and on front i am using vue js to edit team record
editTeam(id) {
axios.get('/teams/'+id+'/edit')
.then(response => {
// console.log(response)
this.id = response.data.teams.id,
this.edit_team_name = response.data.teams.team_name
...//some other data
this.edit_team_skills = response.data.teams.skills (//i want to pass here response.data.teams.skills.skills_name but it does not work)
})
},
and edit modal
<div class="form-group">
<label class="form-label" for="team_name">Team Name</label>
<input v-model="edit_team_name" id="team_name" type="text" class="form-control" >
</div>
<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>
So when i click edit button i get team_name on v-model="edit_team_name" but i dont know how to keep selected also old value for v-model="edit_team_skills"
Level 4
@ben taylor yes response.data.teams.skills return this array
[{…}]
0
:
created_at
:
"2022-11-07T16:38:18.000000Z"
id
:
1
pivot
:
{team_id: 2, skill_id: 1}
skills_name: "Developer"
updated_at: "2022-11-07T16:38:18.000000Z"
[[Prototype]]: Objectlength: 1
[[Prototype]]
:
Array(0)
Level 4
@Ben Taylor any idea how to slove this? I am trying some method but is does not work as i want
Level 35
The v-model should bind a single value (in your case, the skill id), not an array. You could do something like this.
data() {
return {
skill_id: null
}
}
<select v-model="skill_id" class="form-select" id="team_foreman" >
Level 4
@Ben Taylor this does not work to me
Please or to participate in this conversation.