ionic 6 离子复选框未选中

Question

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.

Answer 1

OMG，这是因为路由器视图有一个键

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