Vue3复选框v-model绑定0/1布尔值触发TS类型报错如何解决

后端用数字0/1存储布尔状态时，复选框v-model绑定触发TS报错的核心原因有两点：

• Vue内置TS类型默认规定复选框的checked属性（即v-model绑定值）仅接受布尔值、数组、Set类型，数字类型不在默认允许的类型范围内
• 此前添加的true-value="1"、false-value="0"属于静态属性，传入的实际是字符串"1"/"0"，既和数字类型的字段不匹配，也无法覆盖TS的类型校验规则

方案1：手动绑定值转换（推荐，零类型兼容问题） #

完全绕开v-model的默认类型限制，显式处理数字和布尔值的双向转换，逻辑直观无隐式问题：

<!-- settings.crawl_on 为数字0或1 -->
<input
  type="checkbox"
  :checked="settings.crawl_on === 1"
  @change="settings.crawl_on = $event.target.checked ? 1 : 0"
/>

方案2：v-model搭配类型断言+动态值绑定 #

如果要保留v-model写法，需要先把true-value/false-value改为动态绑定（加冒号）传入数字值，再通过类型断言临时绕过TS校验：

<input
  v-model="settings.crawl_on as unknown as boolean"
  :true-value="1"
  :false-value="0"
  type="checkbox"
/>

注意：true-value/false-value前的冒号不能省略，省略时传入的是字符串"1"/"0"，会和数字类型的字段值不匹配，导致勾选逻辑异常。

如果项目中大量存在0/1存储布尔值的场景，可以通过扩展Vue全局类型的方式统一放开校验，不需要每个组件单独处理：
找到项目中的全局类型声明文件（通常是env.d.ts或shims-vue.d.ts），添加如下类型扩展代码：

import 'vue'

declare module 'vue' {
  interface HTMLInputElement {
    checked?: any[] | Set<any> | Booleanish | number
  }
}

添加完成后，全局所有复选框绑定数字类型的v-model都不会再抛出类型错误，使用时统一搭配:true-value="1"、:false-value="0"保证业务逻辑正确即可。

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