[Chartjs]-How to mutate VueJS prop?

by

2đź‘Ť

There is no way to “properly” mutate a prop, because it is a input to a component.

I recommend importing the data passed via the prop to the component’s state and then using accordingly. By using this local copy, you avoid mutating the prop and getting that warning.

export default Bar.extend({

  props: ['myData'],

  data() {
    return {
      passedData: null
    }
  }

  mounted() {
    // Import data from prop into component's state
    this.passedData == this.myData;
    // Use as desired
    this.renderChart(this.myData, {
      responsive: true,
      maintainAspectRatio: false
    })
  },
  watch: {
    myData: function() {
      console.log('destroy')
      this._chart.destroy()
      this.renderChart(this.myData, {
        responsive: true,
        maintainAspectRatio: false
      })
    }
  }
})

0đź‘Ť

A comment / addition to @TheCascadian’s answer: If myData is an Object, then this.passedData would be a reference to the same object, so you’ll still get that warning. You might consider using cloneDeep from lodash to have a real inner copy of the property and use it internally accordingly.

Leave a comment