vue常见错误：Invalid prop: type check failed for prop “data“. Expected Array, got Object

大家好，又见面了，我是你们的朋友全栈君。

错误截图

错误分析

这个错误的意思是说：无效的命名数据:“数据”类型检查失败。期望数组，得到对象，那么我们这个时候很明白了，是类型不对，但是是哪一行的呢？打开错误信息下面的详情，这个时候找到后缀是自己页面的.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;

到这里就解决了，很多的问题都是我们的大意造成的，其实只要写代码认真一些，这些问题应该都不会出现。

喜欢的可以关注，一起学习！