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

Question

概要

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[ユーザー名] = {オブジェクト} という構造の違いが問題でしょうか。。

コード

実際のコードとは異なりますが、簡潔に要所のみを抜き出しています。

<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は無視するというのもひとつの解決でしょうか。

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

Comments

[Matsumon0104]

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

「this.Users.foreach」の時点で「this.Users」は空ではありませんでしょうか。

[godcat]

ご質問頂きありがとうございます。
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]

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

[godcat]

申し訳ございません、知識不足で「レンダーされる瞬間」というのをどう確認するかが曖昧なのですが、
mounted()内でchartItemsを出力する事で確認になるでしょうか？

mounted()にてconsole.log(chartItems)を実行したところ、
{__ob__: Observer}
Arisa: (...)
Bob: (...)
Charley: (...)
datasets: (...)
labels: (...)
のように表示されました。（...）の中身は全てオブジェクト（labels,datasets）が確認できました。
とはいえ、datasets、labelsが想定と違う場所にいて驚きました。これでは初期値が意味をなしていないですね。

[Matsumon0104]

失礼しました。
「知りたいこと」に書いてありましたね。

今、テストする環境が無いので、下記のようにしたら、warningでますでしょうか？

<BarChart v-if="chartItems[User.name]" v-bind:chartData="chartItems[User.name]" :options="Options" :styles="chartSize"/>

[godcat]

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

[Matsumon0104]

上手くいったようでよかったです。
ご質問事項をよく読まなくて、回答を導き出すためにお時間がかかって、申し訳ありませんでした。

自己解決として、回答部に解決方法を記載して質問を閉じていただけますでしょうか。

Answer 1

v-ifを追加することで解決できました。

<template>
  <div v-for="User in Users" :key="User.name">
  
     <BarChart  v-if="chartItems[User.name]"  v-bind:chartData="chartItems[User.name]" :options="Options" :styles="chartSize"/>

  </div>
</template>

chartItems[User.name]がまだ存在しない時は、後ろのchatDataのbindが関係なくなるので、
結果としてwarningが消えたのだと考えられます。

@Matsumon0104様ご助言のもと解決いたしました。
ありがとうございました！