概要
Vueにおいてchartjsを利用して各ユーザーごとのグラフをループで表示しています。
ユーザーごとのデータを判別するために、連想配列を用いています。
困っている事
グラフは正しく表示されるのですが、コンソールに表示される下記warningが消せません。
[Vue warn]: Invalid prop: type check failed for prop "chartData". Expected Object, got Undefined
想定している流れ
- 画面起動時にDBからユーザーのリストを取得する
- 各ユーザーの情報をDBから取得する
- 取得したユーザーの情報をchartItems[ユーザー名]のオブジェクトに入れる
- chartjsでグラフが反映される
試した解決方法
こちらにほぼ回答に近い記事があります。
https://nplll.com/2019/05/vue-chartjs_error/
https://www.ultra-noob.com/blog/2020/50/
しかし解決されませんでした。
chartItems[ユーザー名] = {オブジェクト} という構造の違いが問題でしょうか。。
コード
実際のコードとは異なりますが、簡潔に要所のみを抜き出しています。
js
<template> <div v-for="User in Users" :key="User.name"> <BarChart v-bind:chartData="chartItems[User.name]" :options="Options" :styles="chartSize"/> </div> </template> <script> data () { return { Users:[] chartItems: { labels:[], datasets: [] }, } }, created () { this.setChart() }, methods:{ setChart(){ this.$axios.$post(/getUsers) .then(res=> { // APIを実行してユーザー情報を取得します。仮に下記のようなデータが取得されると仮定します。 this.Users = [{name:"Arisa", id:1111}, {name:"Bob", id:2222}, {name:Charley, id:3333}] }) this.Users.foreach(user=>{ var obj = { labels: [1,2,3,4,5], datasets: [{ label: "フォロワー数", data: this.Data[user.name], // 別途APIから取得したData[ユーザー名]の連想配列があります。 }] } // ここでchartDataにバインドするchartItems[ユーザー名]をセットします。 this.$set(this.chartItems, user.name, obj) }) } } </script>
知りたい事
「レイアウトが作成される段階ではchartItems["Arisa"]やchartItems["Bob"]は存在しないのでwarningが表示されるが、this.$setでchartItems["Arisa"]などが検知されて結果として表示は問題ない」という解釈で相違ないでしょうか。
また、エラーを表示させない方法も知りたいですが、そもそもの画面表示が問題なくできてしまっている以上、このwarningは無視するというのもひとつの解決でしょうか。
素人質問で大変恐縮でございますが、何卒よろしくお願いいたします。
まだ回答がついていません
会員登録して回答してみよう