APIから取得してきたデータがvue-chartjsに反映されなかった

はじめに

〜なぜvue-chartjsを使用したのか〜
「Chart.jsかD3.jsを使おう！」と思っていたのですが、いろんなサイトでvue-chartjs使った方が楽みたいなことが開かれていたので使ってみました。

※修正などがあればコメント欄に書いていただけると嬉しいです！

vue-chartjsとは

vue-chartjs は Chart.js をvueで使用するためのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。

公式参照

最初のコード

<script>
import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props: {
    chartData: Object,
    options: Object
  },
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}
</script>

ここで、chartDataがnullで渡されて変更が聞いていない！と気づく。

対応⑴ watchで監視する

<script>
import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props: {
    chartData: Object
  },
  data() {
   data: this.chartData
  },
  // dataプロパティを監視
   watch: {
     data: {
         handler(val) {
             this.data
         },
         immediate: true,
         deep: true,
     }
   },
  mounted () {
    this.renderChart(this.chartData, this.options)
  }

}
</script>

this.dataはobserverなので変更をしてもリアクティブにならない。
もしくは、chart.jsが変更できない仕様になっているので変更されなかった。

対応⑵ vue-chartjsのreactivePropを使う

しっかりと公式ドキュメントに書いてある。
以下で解決した。

Chart.js 自身ではデータセットを変更した場合に、ライブアップデートの機能を提供していません。 しかしvue-chartjsはこれを実現するために2つの mixin を提供します。(reactiveProp/reactiveData)

つまり、propsが更新されるたびに再描画されるようになる。
mixinをimportして、reactivePropを利用する

<script>
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins // 追加

export default {
  extends: Line,
  mixins: [reactiveProp], // 追加
  props: { 
    chartData: Object,
    options: Object
  },
  mounted () {
    this.renderChart(this.chartData, this.options)
  }

}
</script>

今後

迷ったらまず１次情報をみるのだ。