Nuxt 2组合式API中基于API响应的复选框条件v-model问题

问题核心在于你初始化isChecked数组时，统一将所有元素设为false，没有结合API返回的has_purchased字段来设置初始选中状态。

解决方案 #

修改isChecked的初始化逻辑，遍历商品列表时直接取每个商品的has_purchased值作为对应复选框的初始选中状态：

// 替换原来的初始化代码
const isChecked = ref<boolean[]>(boostersState.boostersIcons.map(item => item.has_purchased))

效果说明 #

修改后，isChecked数组的每个元素会与对应商品的已购状态一一对应：

• 已购商品（has_purchased为true）：复选框默认勾选且禁用
• 未购商品（has_purchased为false）：复选框可正常交互

你原来的复选框代码无需改动：

<input type="checkbox" v-model="isChecked[index]" :disabled="booster['has_purchased']" />

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