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

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

本文详细讲解在 Nuxt 2 项目中，如何结合 Composition API，根据后端接口返回的 `has_purchased` 字段，自动设置复选框（checkbox）的初始选中与禁用状态，确保已购买商品默认被勾选且用户无法修改，实现前后端状态同步。

在 Nuxt 2 项目中集成 Composition API 进行开发时，实现“已购商品复选框自动选中并锁定”的功能，看似直观，却隐藏着一个常见误区。许多开发者会习惯性地使用一个静态空数组来初始化 `v-model` 绑定的响应式变量，例如 `ref([])`。然而，当异步获取的 API 数据（例如 `boostersData`）加载完成后，这个预先定义的 `isChecked` 数组并不会自动依据数据中的 `has_purchased` 字段进行更新。最终导致的结果是：尽管后端接口明确返回了 `"has_purchased": true`，但前端的复选框却依然显示为未选中状态，造成了数据与界面表现的不一致。

问题的根源非常清晰：与 `v-model` 绑定的响应式数组，其初始值必须根据实际、已加载完成的业务数据动态计算生成，而不能在组件初始化阶段随意预设一个静态值。

✅ 正确的解决方案与步骤

如何确保复选框的选中状态能够精确地跟随 API 数据的动态变化呢？核心策略是利用 Vue 的 `watch` 函数来监听数据源的变化。具体实施步骤是：首先声明一个响应式引用但不立即赋予具体值，然后通过 `watch` 监控 `store` 中 `boostersData` 的状态，待其数据准备就绪后，再依据每个数据项的 `has_purchased` 字段来动态构建初始状态数组。

// 在 setup 函数中，请替换原有的静态初始化方式：
// const isChecked = ref(boostersState.boostersIcons.map(() => false))
// 改为：声明响应式引用，但暂不进行赋值操作
const isChecked = ref([])

// 使用 watch 函数监听数据变化，并在数据就绪时动态初始化
watch(
  () => boostersState.boostersData,
  (newBoostersData) => {
    if (newBoostersData && typeof newBoostersData === 'object') {
      // 将 API 响应对象转换为数组，并提取每个 booster 对象的 has_purchased 值作为对应复选框的初始状态
      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` 或其他非严格布尔值可能导致的逻辑误判。

模板（Template）部分的绑定则保持简洁明了即可：

通过以上设置，`v-model` 就能精确无误地同步服务端状态：当 `has_purchased` 字段值为 `true` 时，对应的复选框在渲染时即处于选中且被禁用的状态；当值为 `false` 时，用户则可以自由地进行勾选或取消操作。