Invalid prop: type check failed for prop "price". Expected String, got Number.

最新推荐文章于 2025-07-07 12:01:31 发布
原创 最新推荐文章于 2025-07-07 12:01:31 发布 · 5.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Invalid prop: type check faile

本文详细解析了在Vue项目中，由于父组件向子组件传递的数据类型与子组件定义的类型不符导致的警告问题。通过调整子组件的价格属性类型从字符串改为数字，成功解决了这一常见错误。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在谷歌浏览器上写Vue项目时，总会有很多警告，关键是红色的，非常刺眼，一片红好像是严重的错误，在有强迫症的程序员眼里非常之别扭，准备清除警告！

定位错误信息：components/alters/addCartAlter.vue 和src/pages/HomePages/productDetails.vue中的price的类型不对，

组件中定义类型为字符串：

父试图用Number赋值的，原来类型不匹配所以报的这个问题。、

解决办法：把子试图中String改为Number，就OK了！

正确解决“Invalid prop: type check failed for prop “xxx”. Expected Boolean, got String“异常的有效解决方法
wbajsjhhhhh的博客
05-03 7037
正确解决"Invalid prop: type check failed for prop “xxx”. Expected Boolean, got String"异常的有效解决方法
前端开发：遇到提示Invalid prop：type check failed for prop “modelValue“. Expected Number…的解决方法
全沾软贱开发攻城狮
04-04 1万+
前言 在Vue开发中，经常会遇到一些很共性的报错提示，而且有时候提示已经很明确的告诉开发者问题出现在哪里，尤其是在Chrome的控制台输出上面，只要看一下输出日志就知道问题所在。但是对于一些刚入行的开发者来说，看日志的意识还没有养成，需要借助外力来解决问题，这样不是不可以，主要是要学会看输出的日志以及提示，这样才能很好的“对症下药”。本篇博文主要是分享一下查看日志的方法，根据日志来解决警告或者报错提示，分享给有需要的人，这里以一个常见的报错为切入点来讲解。 警告提示 在运行项目之后，Chrom
type check failed for prop "name". Expected String, got Number.
ma_pei的博客
06-25 5399
写项目的时候遇见 type check failed for prop “name”. Expected String, got Number. 传入的是Number类型，结果报错了，后来在传入的值后面拼了一个空字符串，自动转成了字符串，解决了 ...
Vue 开发问题：Invalid prop: type check failed for prop “value“. Expected String | Number | Boolean...
最新发布
weixin_52173250的博客
07-07 492
Vue 开发问题：Invalid prop: type check failed for prop "value". Expected String | Number | Boolean...
el-submenu 报错 [Vue warn]: Expected String, got Number.
weixin_33779515的博客
12-09 1247
<el-submenu v-for="(item, index) in navBarData" :index="index" :key="index"> <template slot="title"> <i class="el-icon-location"></i> ...
Invalid prop: type check failed for prop ““. Expected Number | String, got Array
白瑕 的博客
04-30 3376
记录一个用Props传值时出现的BUG和原因.
“Invalid prop: type check failed for prop “xxx”. Expected Boolean, got String“异常的解决方案
2301_79779756的博客
05-09 7329
在Vue.js等前端框架中，组件的props（属性）是用来接收来自父组件的数据的。每个prop都可以被指定一个类型，如String、Number、Boolean、Array、Object、Date、Function、Symbol以及任何自定义的构造函数。当传递给组件的prop值类型与定义的期望类型不符时，Vue会在控制台中发出警告，提示类型检查失败。
Vben Admin [Vue warn]: Invalid prop: type check failed for prop “api“. Expected Function, got Null
qq_51536454的博客
12-28 1148
Vben Admin 如何解决警告 [Vue warn]: Invalid prop: type check failed for prop "api". Expected Function, got Null
Invalid prop: type check failed for prop “index“. Expected String with value “100“, got Number with
m0_56302604的博客
03-16 1536
在使用element UI 的导航菜单时，菜单数据从后台获取过来后显示，出现错误： 原因： 导航菜单中的index字段要是字符串格式，但是后台数据是number格式，所以才会有以上格式警告。 解决办法： 可以将绑定index字段的数据转换成字符串格式。 vue代码: <el-menu mode="horizontal" :default-active="activePath"> <!-- 一级菜单 --> <el-submenu :index="item.cate_id
vue表单验证中 Invalid prop: type check failed for prop “model“. Expected Object, got String with value “l
weixin_43413645的博客
04-19 4316
4/19 在写vue项目注册页面中rules规则的时候，反复验证prop和rules中值相同的情况下，运行一直产生报错 <template> <div> <div id="register" class="box" > <h3>注册登录页面</h3> <el-form ref="ruleform" :rules="rules" model="loginForm" label-width="20%"> .
Invalid prop: type check failed for prop “percentage“. Expected Number with value 2.06, got String w
weixin_44273026的博客
12-06 3851
Invalid prop: type check failed for prop “percentage”. Expected Number with value 1.72, got String with value “1.72”. percentage里面的数据是number类型 <el-progress v-if="e.totalCount > 0" style="width: 50%" :text-inside="true" :stroke-width="20" :percentag
Invalid prop: type check failed for prop “percentage“. Expected Number with value NaN, got Function
weixin_43606967的博客
12-23 3363
报错：vue.js:634 [Vue warn]: Invalid prop: type check failed for prop “percentage”. Expected Number with value NaN, got Function 因为 没赋初始值 { name: '在编', num: '', percentage: Number, //报错 color: '#867DFF' }, { name: '在编', num: '', percent
报错：Invalid prop: type check failed for prop “percentage“. Expected Number with value 36
m0_49014420的博客
07-31 597
Invalid prop: type check failed for prop "percentage". Expected Number with value 64, got String with value
[VUE]报错: Invalid prop: type check failed for prop “value“. Expected String, Number, got Array found
Loery1314的博客
08-30 1万+
控制台报错：[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, got Array found in。错误翻译：属性无效：属性“值”的类型检查失败。应为字符串，数字，在中找到了数组。查找了报错相关文件，最终查出了问题所在，将数据类型写成了数组型。...
Invalid prop: type check failed for prop “label“. Expected String with value “1“, got Number with va
湾流~ 的博客
03-29 7968
期望值为字符串,的到的值为数字类型,所以转为字符串就好了 index+1+'' <el-form-item :label="index+1+''" v-for="(item,index) in intro" :key="index+1"> </el-form-item>
Invalid prop: type check failed for prop “value”. Expected String, Number, got Array
热门推荐
gaoyu007的博客
07-19 5万+
报错内容：Invalid prop: type check failed for prop “value”. Expected String, Number, got Array。 原因：relateuserCount在该change事件中有赋值，该属性本身是string类型，prop也是该属性。但是现在复制强制改成数组类型，但是prop并不支持prop为数组类型，prop对应值只能是string或者number。导致报错。 select 多选、远程搜索都有，参考官方示例。 如果el-option是v-fo
微信小程序：Expecting 'STRING', got INVALID报错
傲笑风的博客
04-17 1968
Expecting ‘STRING’, got INVALID报错 微信小程序出现如下报错： 原因：在app.json有注释 解决办法：把注释删掉即可
Invalid prop: type check failed for prop “content“. Expected String with value “0“, vue 警告
pengju12345的博客
06-08 2425
Invalid prop: type check failed for prop "content". Expected String with value "0"报错
[Vue warn]: Invalid prop: type check failed for prop “content“.
小废物
10-21 1607
[Vue warn]: Invalid prop: type check failed for prop “content”. Expected Number, String, got Function 在使用vant组件调用Badge 徽标时 ，设置 content 属性后,出现的错误 查资料发现是忘记给 content设置 类型了！ 大家在使用时特别注意 正确如下： <!-- 底部添加评论区域 --> <div class="icon-box">
Invalid prop: type check failed for prop value. Expected String, Number, got Array found in
08-11
错误信息是"Invalid prop: type check failed for prop 'value'. Expected String, Number, got Array." [1 [2 [3 这个错误告诉我们，在某个组件中，属性'value'的类型检查失败。该属性期望的类型是字符串或数字，但...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值