Error screenshot

Error analysis

Invalid named data: Data type check failed. Expect an array, get an object, so we’re pretty clear at this point, it’s the wrong type, but what row is it? Open the error message below the details, this time to find the suffix is your page’s.vue file, see which line, to know where the problem is! Here are mine:

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
Copy the code

Look at the third line from the bottom, it’s my file, so my error is on line 426. Look at my code on line 426:

that.common_table_info = res.data.data.room_type_price;
Copy the code

Element :data= ‘common_table_info’, element:data= ‘common_table_info’, He wanted to get an array, but I gave him an object, and the data was rendered, but it was an error. Here is the result returned by res.data.data.room_type_price, which is obviously an object.

{
    "message": "success"."data": {
        "room_type_price": {
            "FYDCF": {
                "room_type": "Elegant bed room."."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": "Elegant two-bed room."."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": "Family Suite"."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"
}
Copy the code
Problem solving

Now that we have found the cause, the solution is very simple, just turn the object into an array!

let common_table_info = [];
              /** * the object is converted to an array, so that the type is not wrong */
              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;
Copy the code

Here is the solution, many of the problems are caused by our carelessness, in fact, as long as the code carefully, these problems should not appear.

Like can pay attention to, learn together!