[Chartjs]-[Vue warn]: You may have an infinite update loop in watcher with expression "chartData"

by

2👍

✅

You should use reactiveProp mixin instead of update chart yourself.

In document, it said:

On data change, it will either call update() if only the data inside
the datasets has changed or renderChart() if new datasets were added.

<script>
  import { Radar, mixins } from 'vue-chartjs'

  export default {
    extends: Radar,
    props:['chartData','options'],
    mixins: [mixins.reactiveProp],
    mounted () {
      this.renderChart(this.chartData, this.options)
    }
  }
</script>

0👍

ChartJS mutates the data object every time you invoke update() or upon the first-time render. It adds _meta property to chartData.dataset and because you use a deep watcher, Vue invokes the watcher immediately after ChartJS adding/updating _meta causing an infinite update loop.

The solution, as @ittus has pointed out, is to use the builtin mixin that comes along with the package. It has a limit that you must replace the entire chartData object to be reactive. Otherwise, you have to invoke update() manually after the data object is changed, because internally, the watcher provided by the mixin is not deep.

However, if you are not using vue-chartjs library and have built your own wrapper, or you insist to use a deep watcher, you can make a deep clone of the data object. You can either use JSON.parse(JSON.stringify(data)) or cloneDeep from Lodash.

Further reads:

Leave a comment