Vue3中使用v-model时，如何在页面初始化时根据数组预勾选复选框？

在Vue里用v-model绑定数组实现复选框组时，根本不需要操作DOM来设置勾选状态，直接通过控制checkedApps数组的内容就能实现预勾选——数组里包含哪个userApp.id，对应的复选框就会自动处于勾选状态。

具体实现步骤： #

• 先拿到你所说的「另一个存着需要预选中id的数组」（假设叫preSelectedIds）
• 在组件初始化阶段，把preSelectedIds里的id赋值给checkedApps即可

代码示例：

如果preSelectedIds是同步数据（比如从props传入、固定值）：

data() {
  // 示例：假设这是你需要预选中的id数组
  const preSelectedIds = [2, 4, 6];
  return {
    checkedApps: [...preSelectedIds], // 直接初始化数组
    userApps: [/* 你的应用列表数据 */]
  }
}

如果preSelectedIds是异步获取的（比如从接口请求）：

async created() {
  // 模拟接口请求获取预选中的id数组
  const preSelectedIds = await this.getPreSelectedIds();
  // 更新checkedApps，复选框会自动同步状态
  this.checkedApps = preSelectedIds;
}

为什么原生DOM操作没用？ #

Vue的响应式系统会接管DOM的状态，v-model绑定的checkedApps是唯一的数据源。你用原生JS修改DOM的checked属性后，Vue在后续的更新周期里会根据checkedApps的内容重新渲染DOM，覆盖你手动修改的状态，所以直接操作DOM是无效的。

另外，不需要给复选框手动加checked属性，v-model会完全基于checkedApps数组的内容来控制每个复选框的勾选状态。

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