[Vuejs]-Trying to reactively update chart data, however, the chart does not reflect the changes. Vue.js

by

0👍

From: https://v2.vuejs.org/v2/guide/reactivity.html

Sometimes you may want to assign a number of properties to an existing
object, for example using Object.assign() or _.extend(). However, new
properties added to the object will not trigger changes. In such
cases, create a fresh object with properties from both the original
object and the mixin object:

Try updating your this.data by doing this:

this.data = Object.assign({}, {
                labels: ['Red', 'Red', 'Red', 'Red', 'Red', 'Red'],
                datasets: [{
                    label: 'Please Work',
                    data: [6, 7, 8, 9, 10, 11]
                }],
            })

0👍

Try using a deep watcher on data.

{
  watch: { 
    data: {
      handler: function(value) {
        this.renderChart(this.data, this.options)
      },
      deep: true,
    }
  }
}

BTW it is confusing to have a data property called data… I suggest changing it to chartData.

In Vue, only the top level object properties will trigger reactive changes. deep will cause nested objects (in your case labels and datasets) to also trigger an update. Most cases do not need deep, so to eliminate the overhead you need to add it if you want it.

Make sure you do not add any new properties to an existing data object without going through Vue.set. That is the next most common issue when the UI does not update to data changes.

Leave a comment