Vue3+Ionic6中ion-checkbox绑定isActive为true未正常勾选如何解决

• Vue.js 3
• Ionic 6

<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>

接口返回城市列表数据，每个城市项均带有isActive属性，预期当城市的isActive属性值为true时，对应ion-checkbox组件应显示勾选标记，但实际勾选状态未正常生效。

Ionic 6 适配Vue3的ion-checkbox组件存在状态绑定冲突问题：

• 同时绑定modelValue和原生checked属性时，组件内部状态优先级判定混乱，初始传入的布尔值无法正确映射到勾选UI上
• 手动监听update:modelValue更新值的同时又绑定ionChange事件触发业务逻辑，两次状态更新时序冲突会覆盖初始值
• 模板内事件回调写this.selectCity属于Vue3模板语法错误，会导致回调执行异常，间接影响状态同步

直接使用Vue官方推荐的v-model语法做双向绑定，移除冗余的属性和事件绑定即可，修复后代码如下：

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

修复点说明：

• 移除冗余的:checked绑定，组件内部已通过modelValue控制选中状态，无需额外传原生checked属性
• 移除手动写的@update:modelValue赋值逻辑，v-model会自动完成双向绑定，避免重复赋值冲突
• 去掉事件回调里多余的this，Vue3模板作用域可直接访问组件实例上的方法，不需要手动加this引用

额外注意：如果城市列表是接口异步返回的，赋值时要保证对响应式变量整体赋值，不要直接通过索引修改数组项，避免Vue响应式丢失导致状态不更新。

内容的提问来源于stack exchange，提问作者Andrew