I have a v-for inside an ion-modal where when you click a checkboxs item it adds the item object to an Array via Vuex, the Object it adds normal to the Array but i have to click twice to see the ion-checkbox change as ‘checked’ visually, my code:
<ion-radio-group>
<ion-item-sliding v-for="metaItem in this.metaList" :key="metaItem.id" :disabled="selectMode">
<ion-item button @click="(!selectMode?this.metaId = metaItem.id:false)">
<ion-checkbox
v-if="selectMode"
@click="this['modals/metadata/selectMeta'](metaItem.id)"
:checked="this.selectedMeta.findIndex(sm => sm.id === metaItem.id) >= 0 ? true : false"
color="primary" slot="start"> </ion-checkbox>
<ion-label>{{ metaItem.nombre }}</ion-label>
</ion-item>
<ion-item-options side="end" v-if="metaItem._default == 1 ? false : true">
<ion-item-option color="danger" button @click="deleteMetadata($event, metaItem.id)" :disabled="selectMode">Eliminar</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-radio-group>
Vuexs mutator code (it adds or remove the object depending if is in the Array):
selectMeta: (state: any, metaId: any) => {
console.log(state.selectedMeta)
const _i = state.selectedMeta.findIndex((sm: any) => sm.id === metaId)
if( _i >= 0 )
state.selectedMeta.splice(_i, 1)
else
state.selectedMeta.push(state.metaList[state.metaList.findIndex((m: any) => m.id === metaId)])
}
Once its added to the array but not checked visually, I close the modal and then open it again and the items shows checked but i have to click again on them twice to toggle the checkbox visually.
What is the best way to resolve this? i’ve read i have to add a v-model but since the items are loaded the first time from an Api I dont know how to bind them.
Thanks!.