Expected Array got Object

原创 已于 2022-09-15 09:58:44 修改 · 5.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

于 2020-05-19 10:13:56 首次发布
本文解析了一个常见的编程错误：期望接收数组类型参数，却接收到对象类型。这种情况通常出现在JavaScript等动态类型语言中，不当的数据类型可能导致运行时错误。文章详细解释了错误原因，并提供了检查和修正方法。

Invalid prop: type check failed for prop “data”. Expected Array, got Object

简单来说，就是你传参的类型错了。
需要传递一个对象类型，但是传递的确实数组。

文章来源：学至分享

vue error---Expected Array ,got object
kuguhuan的博客
06-11 5756
有时候接口传过来的是个对象，但是我们直接把它复制给了element表格里的data，就会报错Expected Array ,got object 解决办法：把这个对象push进表格数组
Invalid prop: type check failed for prop “data“. Expected Array, got Object[已解决]
聪明不喝牛奶的博客
07-23 1万+
[Vue warn]:Invalid prop: type check failed for prop “data”. Expected Array, got Object 要处理这个bug就必须先明白这个bug到底是什么类型是怎么一回事，那字面意思就是说：这是一个非法的数据类型，本来期望的是得到数组但是你给了一个对象。好就到这，问题就很明了，那就是你给的对象要转换成数组了。然后就开始转换，这网上很多的解决方法我就不说了。我来讲讲一个我觉得更简单的解决方法。 首先这是我们定义好的接受的格式 report:
【前端-vue报错】Invalid prop: type check failed for prop “data“. Expected Array, got Object
九琼的博客
03-21 4845
意思是期望得到的是Array类型，但实际得到的object类型。 比如说： let a ={ aa:1, bb:2 }， let b = ['aa','bb','cc'] let c = "aabbcc" let d = 100 a是对象类型（object），b是数组类型，c是字符串类型，d是数值类型。 我这里是用apifox模拟后台发送的json数据，如图 其中equip就是object，可以考虑get对象之后把它转变为array 具体转变方法可以参见https://blog.csd
Expected Array,got object
lixiaoyu0709的博客
09-09 458
Expected Array,got object
使用vue报错：type check failed for prop “data“. Expected Array, got Object
小翁的博客
12-24 1万+
在使用axios返回前端的数据时报错：type check failed for prop “data”. Expected Array, got Object 事实上，我们从报错中就能知道我们给出了对象，他要的是数组array，而我们给了objcet对象 根据所给提示，我把addData注释掉，发现不报错了，那就说明是addData出现问题 顺藤摸瓜，找到addData 的数据，发现原来写的是对象，所以就在对象前面加了一个数组，就没报错了。 ...
[Vue warn]: Invalid prop: type check failed for prop "data". Expected Array, got Object.
boomxiaolong的博客
10-31 1851
报错：data是一个Array类型，获得的是Object类型 原因：在前端表格中我是用tableData数组来接收后台返回的数据，但是在后端的Dao层从数据库获得搜索的数据是一个Object类型的 解决方法：将后端Dao层的方法返回值改为一个List类型的 总结：开发还是要细心，要考虑周全 ...
Vue报错Invalid prop: type check failed for prop “data“. Expected Array, got Object
一般社员的博客
12-27 3662
**报错信息：Invalid prop: type check failed for prop “data”. Expected Array, got Object ** 大概意思是，你获取的数据和你设置的类型不匹配，所以报错， Expected Array, got Object，设置的是数组，但是获取到到的是object类型 ...
[Vue warn]: Invalid prop: type check failed for prop “data“. Expected Array, got Object 解决方法
qq_42514371的博客
08-23 5892
[Vue warn]: Invalid prop: type check failed for prop "data". Expected Array, got Object 解决方法
解决Invalid prop: type check failed for prop “data“. Expected Array, got Object 报错
奥特蛋的博客
02-15 1万+
Invalid prop: type check failed for prop “data”. Expected Array, got Object 报错
(VUE) Invalid prop: type check failed for prop “xxx“. Expected Array, got Object
weixin_45890764的博客
12-02 5363
翻译过来就是：无效属性：属性“xxx”的类型检查失败。应为数组，已获取对象 你应该检查一下你的默认属性是不是写错了,比如： props:{ goodsitem:{ type:Array, default(){ return[] } } }, 实际上返回的是一个对象而不是数组应该为 props:{ goodsitem:{ type:Object, default(){ return[]
解决vue报错: Invalid prop: type check failed for prop “data“. Expected Array, got Object
Codernmx
01-09 5万+
解决：[Vue warn]: Invalid prop: type check failed for prop “data”. Expected Array, got Object 原因是因为你初始化数据的时候是想要保存一个对象但是你接收到的数据是一个数组： 修改为数组就好了
type check failed for prop “model“. Expected Object, got Array
u013437812的博客
05-15 8899
Invalid prop: type check failed for prop “model”. Expected Object, got Array (期望对象，得到的是数组），因为model绑定的是对象，当用它来绑定数组时会报这个错误 解决方法1：直接去掉:model=“form”，不需要校验。 代码如下（示例）： <el-form ref="form" label-width="100px"> <el-form-item label="设备名称">
解决Vue类型错误：Expected Array, got String，导致需要显示字段显示成了[object Object]
最新发布
m0_73457571的博客
08-27 480
摘要：CRM系统二次开发时，前端保存数据报错"[Vue warn]: Invalid prop: type check failed for prop 'value'. Expected Array, got String"，且订单号显示为[object Object]。问题根源在于后端错误地将普通文本字段orderNumber按关联字段处理，返回了List<JSONObject>而非预期的String。解决方法是移除后端多余的集合封装逻辑，保持字段类型与前端预期一致。该案例
解决Invalid prop: type check failed for prop "model". Expected Object, got Array问题
热门推荐
star的博客
03-21 11万+
前台页面报错“Invalid prop: type check failed for prop “model”. Expected Object, got Array ” 从后台获取的数据是List类型，需要把它改为Object 获取数据的代码为 this.update = response.data; 改为： this.update = respons...
前端vue：解决Invalid prop: type check failed for prop “model“. Expected Object, got Array问题
江一铭
09-10 8万+
前台页面报错“Invalid prop: type check failed for prop “model”. Expected Object, got Array ” 错误是：期望对象，得到的是数组 从后台获取的数据是数组类型，需要把它改为Object 第一种情况： 组件传值 1、父组件 2、子组件 3、报错提示 改正 第二种情况： 获取数据的代码为 this.update = response.data; 改为： this.update = resp
Vue报错：Invalid prop: type check failed for prop “roleList“. Expected Object, got Array 解决方法
cdtaogang's blog
08-10 6562
根据以上可以看到我们在父组件向子组件传递的 roleList 变量的类型是数组，而在子组件中 roleList 变量的类型是对象，先看看父组件和子组件传递的代码，这里注意看两个组件之间通过 Props 属性传值所定义的类型。，这就是导致错误的原因，修改 Props 属性的 roleList 变量的类型和默认值即可。问题解决，所以大家在写代码的时候特别是传递参数时，注意两边参数定义的类型是否一致！在子组件中我们的期望是一个对象，而你父组件中给我传递了一个数组。
java array type expected_JSONB to Array Data Type
weixin_36234970的博客
03-04 471
I currently have a table sessions with a column actions(JSONB).I am able to properly store an array from my frontend to my database using array_to_jsonb(array value).The structure of my array (array v...
Vue出现Expected Array, got String with value报错解决方法
AQUROEAN
08-26 9158
问题报错： 在传值的时候加上中括号就行，可将string直接转换成数组 <template> <view> <u-notice-bar type="none" mode="horizontal" :list="[list]"></u-notice-bar> </view> </template> <script> export default { data() { return { list:
VUE 项目浏览器端出现红色 warn 信息：[Vue warn]: Invalid prop: type check failed for prop “options“. Expected Arr
YHLSunshine的博客
04-20 4376
VUE 项目浏览器端出现红色 warn 信息：[Vue warn]: Invalid prop: type check failed for prop "options". Expected Arr
type check failed for prop "timelineData". Expected Array, got Object
08-06
在 Vue 组件中，当传递给组件的 prop 类型与预期不符时，Vue 会抛出警告，例如：`[Vue warn]: Invalid prop: type check failed for prop "timelineData". Expected Array, got Object`。这类问题通常发生在数据结构不符合组件定义的 prop 类型时。 ### `props` 类型校验机制 Vue 在组件实例化时会对 `props` 进行类型校验。这一过程主要通过 `validateProp` 函数实现，该函数会调用 `assertProp` 和 `assertType` 等辅助函数来确保传入的值符合定义的类型要求。如果类型不匹配，则会触发警告。 ### `timelineData` 类型校验失败的原因 当组件定义 `timelineData` 为 `Array` 类型时，但实际传入的是一个 `Object`，就会导致类型校验失败。这种情况通常出现在以下几种场景： 1. **数据结构不匹配**：例如，后端返回的数据结构是 `Object` 类型，而组件期望的是 `Array`。 2. **数据处理错误**：在数据传递给组件之前没有正确解析或转换数据。 3. **包装结构问题**：如引用[2]中提到的，返回的数据可能被包装在一个 `Result<>` 对象中，而直接使用了包装后的对象而不是提取其中的数组数据。 ### 解决方案 #### 1. 数据处理 在将数据传递给组件之前，确保数据结构符合组件的期望。例如，如果后端返回的数据是包装在一个对象中，需要从中提取出数组数据： ```javascript // 假设后端返回的数据结构如下 const response = { data: [/* 数据 */], status: 'success', }; // 在组件中使用时，应传递 response.data 而不是 response <component :timelineData="response.data" /> ``` #### 2. 组件定义调整 如果无法更改数据结构，可以考虑调整组件的 `props` 定义，使其能够接受 `Object` 类型，并在组件内部处理数据转换： ```javascript export default { props: { timelineData: { type: [Array, Object], required: true, }, }, // ... }; ``` #### 3. 类型校验自定义 如果需要更复杂的类型校验逻辑，可以使用自定义校验函数： ```javascript export default { props: { timelineData: { type: Array, required: true, validator(value) { // 自定义校验逻辑 return value.every(item => item.isValid); }, }, }, // ... }; ``` ### 实现原理总结 Vue 的 `props` 类型校验机制通过 `validateProp` 函数实现，确保传入的值符合定义的类型要求。当类型不匹配时，会触发警告。解决类型校验失败的问题，关键在于确保数据结构与组件定义的 `props` 类型一致。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值