Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
woto opened this issue Mar 27, 2019 · 6 comments

Comments

Projects
None yet
3 participants
@woto
Copy link

commented Mar 27, 2019

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

This comment has been minimized.

Copy link

commented Mar 30, 2019

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

This comment has been minimized.

Copy link
Owner

commented Mar 31, 2019

@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

This comment has been minimized.

Copy link
Author

commented Apr 1, 2019

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

@apertureless

This comment has been minimized.

Copy link
Owner

commented Apr 2, 2019

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

@woto

This comment has been minimized.

Copy link
Author

commented Apr 2, 2019

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

@apertureless

This comment has been minimized.

Copy link
Owner

commented Apr 2, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.