Invalid prop: type check failed for prop父传子数据类型报错

最新推荐文章于 2024-10-15 07:00:00 发布
最新推荐文章于 2024-10-15 07:00:00 发布
阅读量917 收藏 1
点赞数 2
分类专栏： uniapp 文章标签： vue uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45659769/article/details/118800923
版权
在Vue项目开发中，遇到父组件向子组件传递数据时出现错误。最初误以为是接口延迟导致的数据未加载，但通过监听发现数据已正确获取。问题在于父组件中变量初始值设为空字符串，当接口返回数组数据并赋值后，父组件仍按初始的字符串类型传递数据，导致子组件接收到的数据类型不匹配。解决方案是确保父组件数据类型的正确初始化。
摘要由CSDN通过智能技术生成

在这里插入图片描述
项目编译中遇到的粗心的小问题，顺手记录下。
在父传子过程中发现传值报错，一开始还以为是父组件接口获取延时导致机构渲染出来后拿不到数据报的undifind，后面用了监听之后发现数据获取到后渲染依旧报错，仔细巡查发现了问题所在，一开始接收接口返回值时对于变量定义设置成了空，此时变量默认为字符串类型，而后接口数组数据赋给变量后虽然变量类型变为数组，但是在父组件传值给子组件的时候，初始化依然是根据data中初始的定义为主，所以便有了虽然子组件接收的定义也是数组，但是传递的时候是字符串的，
父组件
在这里插入图片描述
子组件
在这里插入图片描述

老古懂
关注
专栏目录
正确解决“Invalid prop: type check failed for prop “xxx”. Expected Boolean, got String“异常的有效解决方法
wbajsjhhhhh的博客
05-03 6246
正确解决"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
Invalid prop: type check failed
圣人男的博客
03-16 595
错误出处： 1.子组件 export default { name: 'EditApp', props: { form: { type: Object, required: true, default: Object } } } 2.父组件 export default { name: 'Home', c...
【解决报错】Invalid prop: type check failed for prop “index“.
yummy_yuyu的博客
03-07 163
添加链接描述 经参考完美解决
[Vue warn]: Invalid prop: type check failed for prop “pageSize“. Expected Number with value NaN
最新发布
XING的博客
10-15 382
pageSize属性期待数据类型为Number，值为NaN没有被定义。分析可知，没有给total赋初始值的原因，给total赋初始值，问题就解决了。使用的elementUI框架(分页)，在加载页面时出现以上报错信息。
Invalid prop: type check failed for prop “index“.
Cao_Mary的博客
08-14 195
Vue使用ElementUI的NavMenu时，有个index属性。此属性需要传递string类型。
vue ts ,vue使用typescript的时候，父组件给子组件传值提示 Invalid prop: type check failed for prop "fatherSearch". Expe
lizhen_software的博客
05-14 1万+
vue使用ts会遇到各种各样的问题，最近使用时发现父组件给子组件传值时提示vue is object but string这种，子组件接收的方式如下：这个问题找了好几天，后来发现是因为vue的默认属性导致，需要改成：如果提示其他类型不存在的话，也是一样的解决方式，就改成其他的类型就行了，我不确定TS哪个版本会导致这个问题，因为之前我这个项目没报这个错，就突然有一天不知道弄了个啥，就出现了这个问题，...
Vue报错type check failed for prop
weixin_30425949的博客
07-19 855
在报错的'value'属性前面加:或者去掉:即可解决问题. 转载于:https://www.cnblogs.com/linchenjian/p/11211348.html
Vben Admin [Vue warn]: Invalid prop: type check failed for prop “api“. Expected Function, got Null
qq_51536454的博客
12-28 1036
Vben Admin 如何解决警告 [Vue warn]: Invalid prop: type check failed for prop "api". Expected Function, got Null
vue表单验证中 Invalid prop: type check failed for prop “model“. Expected Object, got String with value “l
weixin_43413645的博客
04-19 4125
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%"> .
使用element-ui组件库中的el-table时报错 Invalid prop: type check failed for prop “data“. Expected Array, got
qq_44670001的博客
01-02 1689
使用 Table组件报错 Invalid prop: type check failed for prop “data”. Expected Array, got Object Error in callback for immediate watcher “data”: “TypeError: data.indexOf is not a function” data.indexOf is not a function data.reduce is not a function Error in mou
Invalid prop: type check failed for prop “defaultExpandAll“.
qq_51846847的博客
06-20 793
Invalid prop: type check failed for prop "defaultExpandAll". Expected Boolean, got String with value "true".报这个错误
Invalid prop: type check failed for prop value
热门推荐
niaonao
08-06 10万+
Vue 报错 Invalid prop: type check failed for prop "value" 问题处理
type check failed for prop “showOverflowTooltip“报错问题的解决方法
smallteddy.blog.csdn.net
07-01 9908
代码 <el-table-column prop="revision" label="新特性" min-width="60" show-overflow-tooltip="true" /> 官方文档解释 报错 解决方法 // 其实把后面主动设置的true去掉就可以了 <el-table-column prop="revision" label="新特性" min-width="60" show-overflow-tooltip /> ...
解决报错Invalid prop: type check failed for prop “value” .Expected String, Number, got Array 并实现子传父展示在页面
m0_65274248的博客
10-09 4768
解决报错Invalid prop: type check failed for prop “value” .Expected String, Number, got Array 并实现子传父展示在页面。并跨页多选
Invalid prop: type check failed for prop “xxx“
weixin_46669844的博客
01-03 673
无效的命名数据:“数据”类型检查失败。很经典的问题处理办法：找引号对应字符位置。。。
“Invalid prop: type check failed for prop “xxx”. Expected Boolean, got String“异常的解决方案
2301_79779756的博客
05-09 4733
在Vue.js等前端框架中，组件的props（属性）是用来接收来自父组件的数据的。每个prop都可以被指定一个类型，如String、Number、Boolean、Array、Object、Date、Function、Symbol以及任何自定义的构造函数。当传递给组件的prop值类型与定义的期望类型不符时，Vue会在控制台中发出警告，提示类型检查失败。
Invalid prop: type check failed for prop “xxx“报错处理
smallteddy.blog.csdn.net
07-08 4万+
首先我们看到这个报错，这个报错的意思是说：无效的命名数据:“数据”类型检查失败。而且上面说了是Boolean类型错误，要把值改成"true"，并且看到是tag标签的错误，于是检查代码： <el-table-column prop="process_id" label="模板号" align="center" min-width="50"> <template v-slot="{ row }"> <div slot="content">.
Invalid prop: type check failed for prop “onUpdate:value“
前端开发
05-19 3131
Invalid prop: type check failed for prop "onUpdate:value"
Invalid prop: type check failed for prop "widgetData"
09-14
当出现"Invalid prop: type check failed for prop 'widgetData'"的错误时，意味着在父组件中传递给子组件的prop 'widgetData'的类型检查失败了。这个错误通常发生在子组件接收到的prop的类型与其预期类型不匹配时。 要解决这个错误，你可以按照以下步骤进行操作： 1. 确保父组件正确传递了prop 'widgetData'给子组件。检查父组件的代码，确认prop 'widgetData'被正确声明并传递给子组件的props选项中。 2. 检查子组件的props选项，确保prop 'widgetData'被正确声明为接收的类型。你可以使用Vue.component方法中的props选项来声明子组件所接收的props。 3. 确保prop 'widgetData'的类型与子组件预期的类型匹配。比如，在labelMixin.js文件中，确保widgetData变量的类型与子组件的预期类型一致。 通过检查父组件传递给子组件的prop 'widgetData'的声明和类型，以及子组件中对prop的声明和预期类型，你应该能够解决"Invalid prop: type check failed for prop 'widgetData'"的错误。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值