表单中组件值类型

[lengkaka]

我用vue3 + vant3 +typescrip，在使用的时候，用一个 reactive 变量给各个组件赋值和关联，每个字段的值只能用string吗？比如：

const detailInfo = reactive({
  userDetail: {
    name: '', // 姓名
    cardId: '', // 身份证号
    gender: '1', // 性别
    birthday: '', // 出生日期
    height: '', // 身高
    weight: '', // 体重
    phone: '', // 电话
    national: '汉族', // 民族
    education: '1', // 教育程度
    profession: '1', // 职业：student：学生，fix：固定职业，none：物业，其他
    independence: '1', // 独立程度：1 能够独立生活 2 某些复杂的日常活动需要协助 3 基本日常活动需要协助 4 完全依赖于他人
    religion: '1', // 宗教信仰：none 否，否则有
    smoke: 1, // 吸烟：1 从来不吸 2 曾经吸，已戒 3 <=10支/日
    drinking: '1', // 饮酒：1 从来不喝 2 曾经喝，已戒 3 少量 4 大量（每天酒精量>=50g）
    drugAllergy: '1', // 药物过敏史/不良反应史: 0 无 1 有
  },
})

而实际上，这里面很多字段在数据库里都是 number类型，比如：weight、height等，这样会导致我必须转换2次
1、在存储数据库前转换一次，string => number；
2、从数据库读取后，给页面赋初始化值时，还得再转一次，number=>string；

请教各位，是我的使用姿势不对么？

[wjw-gavin]

可以先定义其类型

[lengkaka]

谢谢，还有一个问题就是，我发现定义的 detailInfo里的userDetail的各项值，只能赋值为string类型，如果直接根据数据库的类型给，在给组件赋初始值的时候无效，比如 单选，

drugAllergy这个值，如果在 userDetail 给 number类型的值1，则选不上，而且 组件最后的提交给的值，这个值也是string 和数据库的number不一样，我还需要再转一次，是我使用方式的问题么？

[wjw-gavin]

name="1"绑定的就是string，换成:name="1"