vue常见错误：Invalid prop: type check failed for prop "data". Expected Array, got Object
vue常见错误：Invalid prop: type check failed for prop "data". Expected Array, got Object
何处锦绣不灰堆
发布于 2020-05-29 14:47:33
发布于 2020-05-29 14:47:33
文章被收录于专栏：农历七月廿一
错误截图
desc-cn
错误分析
这个错误的意思是说：无效的命名数据:“数据”类型检查失败。期望数组，得到对象，那么我们这个时候很明白了，是类型不对，但是是哪一行的呢？打开错误信息下面的详情，这个时候找到后缀是自己页面的.vue文件，看看是哪一行，就知道问题在哪了！下面的是我的：
warn @ vue.esm.js?efeb:610
assertProp @ vue.esm.js?efeb:1691
validateProp @ vue.esm.js?efeb:1618
updateChildComponent @ vue.esm.js?efeb:2975
prepatch @ vue.esm.js?efeb:4255
patchVnode @ vue.esm.js?efeb:6029
updateChildren @ vue.esm.js?efeb:5914
patchVnode @ vue.esm.js?efeb:6040
updateChildren @ vue.esm.js?efeb:5914
patchVnode @ vue.esm.js?efeb:6040
updateChildren @ vue.esm.js?efeb:5914
patchVnode @ vue.esm.js?efeb:6040
updateChildren @ vue.esm.js?efeb:5914
patchVnode @ vue.esm.js?efeb:6040
patch @ vue.esm.js?efeb:6203
Vue._update @ vue.esm.js?efeb:2790
updateComponent @ vue.esm.js?efeb:2908
get @ vue.esm.js?efeb:3278
run @ vue.esm.js?efeb:3353
flushSchedulerQueue @ vue.esm.js?efeb:3109
(anonymous) @ vue.esm.js?efeb:1938
flushCallbacks @ vue.esm.js?efeb:1857
Promise.then (async)
microTimerFunc @ vue.esm.js?efeb:1905
nextTick @ vue.esm.js?efeb:1951
queueWatcher @ vue.esm.js?efeb:3201
update @ vue.esm.js?efeb:3343
notify @ vue.esm.js?efeb:721
reactiveSetter @ vue.esm.js?efeb:1046
proxySetter @ vue.esm.js?efeb:3430
(anonymous) @ main.vue?512e:426
Promise.then (async)
(anonymous) @ main.vue?512e:408看倒数第三行，是我的文件，那么我的错误是在426行，看一下我的426行代码是什么：
that.common_table_info = res.data.data.room_type_price;这是我的426行代码，那么其实这个时候问题就很明显了，说明我前面的是一个数组，后面的是一个对象，那么common_table_info是我绑定的一个表格的数据，element:data=‘common_table_info’，他希望拿到的是一个数组，但是我给了他一个对象，数据是渲染上去了，但是其实是报错的。下面的是res.data.data.room_type_price返回的结果，很明显是一个对象。
{
"message": "success",
"data": {
"room_type_price": {
"FYDCF": {
"room_type": "风雅大床房",
"2019-05-16": "35/221",
"2019-05-17": "39/221",
"2019-05-18": "39/221",
"2019-05-19": "39/221",
"2019-05-20": "39/221",
"2019-05-21": "39/221",
"2019-05-22": "39/221"
},
"FYSCF": {
"room_type": "风雅双床房",
"2019-05-16": "36/239",
"2019-05-17": "39/239",
"2019-05-18": "39/239",
"2019-05-19": "39/239",
"2019-05-20": "39/239",
"2019-05-21": "39/239",
"2019-05-22": "39/239"
},
"FYTF": {
"room_type": "家庭套房",
"2019-05-16": "0/359",
"2019-05-17": "0/359",
"2019-05-18": "0/359",
"2019-05-19": "0/359",
"2019-05-20": "0/359",
"2019-05-21": "0/359",
"2019-05-22": "0/359"
}
}
},
"new_authorization": "af3e405073cb44baaf6e5508019c9a3b"
}问题解决
既然找到了原因，解决就很简单了，直接将对象转为数组就好了！
let common_table_info = [];
/**
* 这里需要将拿到的对象转为数组，进行赋值，这样才不会宝类型错误
*/
for(let i in res.data.data.room_type_price){
common_table_info.push(res.data.data.room_type_price[i]);
}
that.common_table_info = common_table_info;到这里就解决了，很多的问题都是我们的大意造成的，其实只要写代码认真一些，这些问题应该都不会出现。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/05/28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
