基于 API 响应在 Nuxt 2 中动态初始化复选框选中状态的完整实践

本文详解如何在 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 状态必须源自真实、就绪的业务数据，而非开发者的主观假设。