質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

【Vue】chartjsをループで複数表示する際に、データを連想配列で紐づけようとしてInvalid prop が発生する

godcat
godcat

総合スコア10

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

0クリップ

119閲覧

投稿2022/06/30 03:36

概要

Vueにおいてchartjsを利用して各ユーザーごとのグラフをループで表示しています。
ユーザーごとのデータを判別するために、連想配列を用いています。

困っている事

グラフは正しく表示されるのですが、コンソールに表示される下記warningが消せません。

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

想定している流れ

  1. 画面起動時にDBからユーザーのリストを取得する
  2. 各ユーザーの情報をDBから取得する
  3. 取得したユーザーの情報をchartItems[ユーザー名]のオブジェクトに入れる
  4. 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は無視するというのもひとつの解決でしょうか。

素人質問で大変恐縮でございますが、何卒よろしくお願いいたします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

Matsumon0104

2022/06/30 05:09

コードを簡潔に掲載しているということなので、ケアされているかもしれませんが、 「this.Users」の値は非同期でとられてきていますが、問題ありませんか? 「this.Users.foreach」の時点で「this.Users」は空ではありませんでしょうか。
godcat

2022/06/30 05:22

ご質問頂きありがとうございます。 forEach前にconsole.log(this.Users)で確認すると、中身は記載通りの連想配列がコンソールで確認できます。 ただ、Observerに格納されています。 実はここも少し苦戦した部分で、 ・this.Usersを取得する関数 ・this.Usersを用いてグラフをセットする関数 を並べて実行したところ、仰る通り非同期でthis.Usersが空になってしまっていたので、 現在this.Usersを取得する関数の中で、 this.$axios.post(ユーザー取得API).then(res=> this.Usersに格納してsetChart()を呼び出す) と、axios実行後の処理内部でグラフをセットする関数を呼び出しています。
Matsumon0104

2022/06/30 05:28 編集

レンダーされる瞬間においても、chartItems[User.name]はオブジェクトを返しますでしょうか? エラーメッセージ上では、コンポーネントのpropsとして「Object」で定義されていますが、「Undefined」で受け取っているようです。
godcat

2022/06/30 05:39 編集

申し訳ございません、知識不足で「レンダーされる瞬間」というのをどう確認するかが曖昧なのですが、 mounted()内でchartItemsを出力する事で確認になるでしょうか? mounted()にてconsole.log(chartItems)を実行したところ、 {__ob__: Observer} Arisa: (...) Bob: (...) Charley: (...) datasets: (...) labels: (...) のように表示されました。(...)の中身は全てオブジェクト(labels,datasets)が確認できました。 とはいえ、datasets、labelsが想定と違う場所にいて驚きました。これでは初期値が意味をなしていないですね。
Matsumon0104

2022/06/30 05:43

失礼しました。 「知りたいこと」に書いてありましたね。 今、テストする環境が無いので、下記のようにしたら、warningでますでしょうか? <BarChart v-if="chartItems[User.name]" v-bind:chartData="chartItems[User.name]" :options="Options" :styles="chartSize"/>
godcat

2022/06/30 05:48

warning消えました!! ページ構成時にはまだ存在していないキーについて事前にカラ値を設定するのは無理なのでは、、と思っていたのですが、そもそもの存在判定をしてしまえば済むのですね。なるほど、目から鱗でした。 Matsumon0104様、心より感謝申し上げます。
Matsumon0104

2022/06/30 05:54

上手くいったようでよかったです。 ご質問事項をよく読まなくて、回答を導き出すためにお時間がかかって、申し訳ありませんでした。 自己解決として、回答部に解決方法を記載して質問を閉じていただけますでしょうか。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。