When working on an edit form, I encountered a situation where I had multiple options to choose from. These options were fetched via ajax using axios and assigned to the variable permisos in the component. Later, these options are rendered through a v-for loop. The selected elements are stored in an array called selected which is then linked to the vue-model as shown below:
<div class="row">
<div v-for="permiso in permisos" class="col-md-5 col-12 col-sm-5" >
<input type="checkbox" :value="permiso.id"
class="form-control" :id=permiso.id
v-model="selected" :checked=selected.filter(e => e.id === permiso.id).length > 0 > {{ permiso.name}}
</div>
</div>
Subsequently, another ajax call is made to retrieve the previously selected options before editing the item, so that the appropriate checkboxes can be pre-selected. This is where I'm facing issues with the checked attribute not being set correctly.
axios.get('api/allpermisos')
.then(response =>{
this.permisos = response.data; //dataok
})
if(this.action===2){
axios.get('api/allpermisos/'+ this.dataobject.id)
.then(response =>{
this.selected = response.data;//data ok
})
}
I am looking for a way to automatically assign the checked attribute when receiving the ajax call with the already selected options, and leave unchecked those that are not selected. I tried using includes but did not achieve the desired outcome. Why does the code work fine when the v-model is removed? What could be causing this issue?
<input type="checkbox" :value="permiso.id" class="form-control"
:id=permiso.id :checked=selected.filter(e => e.id === permiso.id).length > 0 > {{ permiso.name}}