[Vue warn]: Invalid prop: type check failed for prop "chartData"

Expected Behavior

Absence of warning )

Possible answer

Can’t understand the reason it’s present. But after changing in https://vue-chartjs.org/guide/#example props: ['chartData', 'options'], to props: ['options'], warn goes away. I thought it’s already added in mixin. What’s wrong?

---

Update: Oh, due adding chartData it seems i’m overriding mixins validation. The root of evil is that the nested component renders firstly when props still null. After changing mounted hook to created in RandomChart.vue warn is gone.

https://medium.com/@brockreece/vue-parent-and-child-lifecycle-hooks-5d6236bd561f

Actual Behavior

[Vue warn]: Invalid prop: type check failed for prop "chartData". Expected Object, got Null 

found in

---> <RateChart> at app/javascript/RateChart.vue
       <RatePage> at app/javascript/RatePage.vue
         <Root>

in vue.runtime.esm.js:640

Environment

• vue.js version: 2.6.10
• vue-chart.js version: 3.4.2

[apertureless]

Oh now I understand.

Well. the issue is that the prop is defined as an object in the mixin. And has a default value of an empty object:

https://github.com/apertureless/vue-chartjs/blob/develop/src/mixins/index.js#L89-L92

You are however passing null to it. Because you define

datacollection: null

if you change that to datacollection: {} the warning will go away.

[williamjingo]

Hello, I tried both datacollection:null and datacollection:{}, both never really worked for me. Try datacollection:{ labels:[], datasets: [] }