【vue-chart.js】Invalid propエラーを解決!

April 21, 2020

以前より出ていた[Vue warn]: Invalid prop: type check failed for prop "chartData". Expected Object, got Null という実行時エラーを解決する。

エラー内容

vue-chart.jsを使っているとブラウザ側のコンソールに次のエラーが出ることがある。

2020 04 22 03h08 41

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

厳密にはエラーではなくwarnで、グラフ描画そのものに影響はなく無視しても動作に問題はないが、Consoleを汚すという理由もあり解決方法を探した。

解決法

vueファイル側でコンポーネントに送るデータ :chart-data="datacollection" となっている場合、恐らくデータ部にて datacollection: nullとなっていると思われる。これを次に変更して定義する。

datacollection: { labels:[], datasets: [] }

原因

そもそもこのエラーはprop(子コンポーネントに渡すデータ)がNullだと言っている。初めからデータセットが入っているプログラムであればこの問題は出ないが、私のケースのように起動後にサーバーからデータを取得しながら描画させたい場合どうしても初期値をNullにしがちである。

また datacollection:{} で定義すれば解決すると考えたが参照時にキーが無い旨のエラーが出るため上記のコードで定義ほうが良いだろう。

参考

次のフォーラムを参考にさせていただいた。

[英語] https://github.com/apertureless/vue-chartjs/issues/497

所感

少々クセのある実装が必要なvue-chart.jsではあるが、D3.jsと思うといくらか学習コストは低いので引き続き使っていこうと考えている。

今後の更新にも期待していきたい。

この記事をシェア:

author icon

仮想トイレ @CrypticToilet
プログラミングや仮想通貨のシステムトレードに関する情報を更新中!どんな情報を流しても詰まらないトイレ。