本文详解如何在 Nuxt 2 + Composition API 项目中，根据 API 返回的 has_purchased 字段自动设置复选框（checkbox）的初始选中与禁用状态，确保已购商品默认勾选且不可修改。
本文详解如何在 nuxt 2 + composition api 项目中，根据 api 返回的 `has_purchased` 字段自动设置复选框（checkbox）的初始选中与禁用状态，确保已购商品默认勾选且不可修改。
在 Nuxt 2 的组合式 API（@nuxtjs/composition-api）场景下，实现「已购商品复选框默认勾选 + 禁用」看似简单，实则易踩坑：若仅用静态数组初始化 v-model（如 ref<boolean[]>([])），当异步数据（如 boostersData）后续到达时，isChecked 不会自动同步 has_purchased 状态，导致 UI 与数据不一致——复选框仍为未选中，即使后端明确返回 "has_purchased": true。
核心问题在于：v-model 绑定的响应式数组必须在数据就绪后，依据真实业务逻辑重新初始化，而非在 setup 阶段凭空创建。
✅ 正确解法是利用 watch 监听 store 中的 boostersState.boostersData，待其更新后，动态生成与 API 数据严格对齐的 isChecked 初始值：
// 在 setup 函数中，替换原有静态初始化：
// const isChecked = ref<boolean[]>(boostersState.boostersIcons.map(() => false))
// 改为：声明响应式引用但暂不赋值
const isChecked = ref<boolean[]>([])
// 使用 watch 捕获数据就绪时机，并按需初始化
watch(
() => boostersState.boostersData,
(newBoostersData) => {
if (newBoostersData && typeof newBoostersData === 'object') {
// 将 API 响应对象转为数组，并提取每个 booster 的 has_purchased 值作为 checkbox 初始状态
isChecked.value = Object.values(newBoostersData).map(
(booster: any) => booster.has_purchased === true
)
}
},
{ immediate: false, deep: true }
)⚠️ 注意事项：
- 不要在 ref() 初始化时硬编码长度或默认值（如 map(() => false)），否则无法反映真实购买状态；
- watch 必须设置 { deep: true }，因为 boostersData 是嵌套对象；
- immediate: false 是安全选择（避免首次触发时 newBoostersData 为 undefined）；
- 类型断言 booster.has_purchased === true 可规避 null/undefined 导致的布尔误判。
同时，模板中保持简洁绑定即可：
<input type="checkbox" v-model="isChecked[index]" :disabled="booster.has_purchased" />
此时，v-model 将准确反映服务端状态：has_purchased: true → 复选框默认勾选且禁用；false → 可自由勾选/取消。
? 进阶建议：
若需支持“已购商品可二次购买”等复杂逻辑，可将 isChecked 改为 ref<Record<string, boolean>>，以 booster.code 为 key 管理状态，提升可维护性与扩展性。
综上，动态初始化 v-model 的本质是「数据驱动视图」原则的落地——UI 状态必须源自真实、就绪的业务数据，而非开发者的主观假设。
