在Vue.js中使用v-model绑定的checkbox如何设置默认选中状态

问题原因 #

使用v-model绑定多选复选框组时，Vue内部会以v-model绑定的数组值作为是否选中的唯一判断依据，原生checked属性会被双向绑定逻辑覆盖，因此手动添加checked不会生效。

解决方法 #

不需要手动加checked属性，只需要将需要默认选中的复选框对应的post.rut值，提前放入selected数组即可：

1. 固定默认选中项的场景，初始化时直接赋值：

data: function() {
  return {
    // 比如要默认选中rut值为'001'、'002'的复选框，直接写在数组里
    selected: ['001', '002']
  }
}

2. 动态列表默认选中的场景，在获取列表数据后筛选赋值：

// 示例：接口拿到post列表后，筛选需要默认选中的项，提取rut值存入selected
async getPostList() {
  const res = await 请求接口获取列表数据
  this.postList = res.data
  // 按需写筛选逻辑，比如默认选中所有状态为启用的post
  this.selected = this.postList.filter(item => item.status === '启用').map(item => item.rut)
}

注意事项 #

要保证存入selected数组的值，和复选框:value="post.rut"绑定的值类型完全一致，比如post.rut是数字类型，就不要存字符串格式的数值，否则匹配失败不会触发选中。

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