[FIXED] ionic 6 ion-checkbox is not checked

Issue

Vuejs 3, Ionic 6

My code

<ion-list>
    <ion-item v-for="(city, index) in cityDataList" :key="index">
        <ion-label>{{ city.name }}</ion-label>
        <ion-checkbox slot="end"
            @update:modelValue="city.isActive = $event"
            :modelValue="city.isActive" :checked="city.isActive"
            @ionChange="this.selectCity(city.id)" />
    </ion-item>
</ion-list>

The Api returns a list of cities. Each has an isActive property. If the city has isActive true, then I expect to see a mark. But this is not happening.

link to documentation https://ionicframework.com/docs/api/checkbox#properties

Here is a visual screenshot.

enter image description here

Solution

OMG, this is becouse router-view has a key

<router-view :key="$route.fullPath"/>

Answered By – Andrew

Answer Checked By – Robin (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published