3

I am using vue-chartjs to render a bar chart. I have two issues:

1) If I use props pushed from a parent to this child component nothing renders. (In the code below, if I set the chart to use test_data it works fine, if I set to use chart_data nothing renders even though the data I am pushing as props is exactly the same as the test_data values.

2) I keep getting the error below for columnsprop and dataprop - I tried using computed properties as you can see but this didn't help.

vue-chartjs.min.js:8 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "columnsprop"

BarChart.vue

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

export default Bar.extend({
  name: 'BarChart',
  props: ['dataprop', 'columnsprop'],
  computed: {
    datavalues: function(){
      return this.dataprop
    },
    columnvalues: function(){
      return this.columnsprop
    }
  },
  data () {
    return {
      options: {
        animation: false,
        responsive: true,
        maintainAspectRatio: false
      },
      test_data: {
        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        datasets: [
          {
            label: 'Example Data',
            backgroundColor: '#f87979',
            data: [100, 70, 50, 30, 20, 15, 10, 8, 7, 5]
          }
        ]
      },
      chart_data: {
        labels: this.columnvalues,
        datasets: [
          {
            label: 'Actual Data',
            backgroundColor: '#f87979',
            data: this.datavalues
          }
        ]
      }
    }
  },
  mounted () {
    this.renderChart(this.chart_data, this.options)
  },
  watch: {
    dataprop: function () {
      console.log('>>watch dataprop chart_data.datasets.data: ' + this.chart_data.datasets[0].data)
      console.log('>>watch dataprop test_data.datasets.data: ' + this.test_data.datasets[0].data)
      this._chart.destroy()
      this.renderChart(this.chart_data, this.options)
    }
  }
})
</script>

I have also tried using a temp property as per here: How to solve [Vue warn]: Avoid mutating a prop directly since the value will be overwritten on vue.js 2?

ie:

data () {
    return {
          datatemp: [],
          columntemp: [],
          ...
    },
}
computed: {
  datavalues () {
    return this.datatemp
  },
  columnvalues () {
    return this.columntemp
  }
},
watch: {
    dataprop: function () {
      this._chart.destroy()
      this.datatemp = this.dataprop
      this.columntemp = this.columnsprop
      this.renderChart(this.chart_data, this.options)
    }
}

But still get the same error

Any ideas?

proximacentauri
  • 1,749
  • 5
  • 25
  • 53
  • 1
    Possible duplicate of http://stackoverflow.com/questions/41215773/getting-avoid-mutating-a-prop-directly-since-the-value-will-be-overwritten-whene or http://stackoverflow.com/questions/42522266/how-to-solve-vue-warn-avoid-mutating-a-prop-directly-since-the-value-will-be – Angelin Calu May 12 '17 at 05:42
  • 1
    this works well: https://codepen.io/LinusBorg/pen/PmRryJ?editors=1010, so you must be doing someting else that's causing this and you don't show us. – Linus Borg May 12 '17 at 08:13
  • 1
    @LinusBorg The problem was I was building the chart data inside the child. I used your code as a guide and just pushed the whole data json object to the child to render. If you post your code in an answer I will accept – proximacentauri May 12 '17 at 10:34

0 Answers0