Vue中使用v-bind绑定对象时布尔值被转换为字符串的问题
问题现象
在Vue项目中,我使用v-bind绑定一个配置对象到组件属性时,遇到了类型转换问题:
报错信息:
[Vue warn]: Invalid prop: type check failed for prop “disabled”. Expected Boolean, got String with value “false”.
我的配置数据:
{
label: '结算费用',
prop: 'stationExpenses',
type: 'input',
attrs: {
disabled: true, // 这里是布尔值
},
}
模板使用:
<a-input
v-model="businessFormData.basicInfo[item.prop]"
v-bind="item.attrs"
/>
问题分析
使用 v-bind=”item.attrs” 时,原本的布尔值 true 被转换成了字符串 “true”,导致组件的 prop 类型检查失败。
疑问
为什么Vue的v-bind会将布尔值转换为字符串?
React中可以直接使用 {…props} 而不会有类型转换问题,Vue为什么不能?
有没有更优雅的解决方案,而不是逐个手动绑定每个属性?
环境信息
Vue版本:2.x
UI框架:Ant Design Vue
求大佬指点!🙏