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

[woto]

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

[andyjsmith]

Not sure if your update means that you fixed it or not, but I was having this problem too. I had a <template> tag in my Chart.vue file which messes things up.

[apertureless]

@andyjsmith
Yeah as mentioned in the docs: https://vue-chartjs.org/guide/#vue-single-file-components

If you're using single file components, you have to remove your own <template> tag.
The reason is quite simple, as the base components come with their own template and you are extending them, your own empty <template> tag, will overwrite the base components one. So there will be no canvas.

Vue.js has no merging strategy for templates, only for methods, props and data.

@woto
Well if you're using the mixin, you should not define the chartData prop by yourself. Because it comes already with the mixin defined.

[woto]

But there are already no <template> in LineChart.js

[apertureless]

Please post some reproduction. Its hard to debug without code ;)

[woto]

@apertureless sorry, right, i had to do it before )
https://codesandbox.io/s/8xxlznpkrj?fontsize=14
as is from guide

[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: [] }

[sensoeurn]

I tried datacollection: { }
It worked for me

[ajaymarathe]

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.

Thanks, it works :)

[mike-seekwell]

changing to an object worked for me too, should the example here be updated? It uses datacollection: null
https://vue-chartjs.org/guide/#example

[JadeLoplop]

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.

tired this, it works! Thanks!!!