0

I am passing data from a parent component to a child component in Vue.js and everything's fine, but where I get stuck is that I can console log the passed data but not feed it to a chart.js diagramm.

export default {
  extends: Doughnut,
  props: {
    carbonDataChart: Object
  },
  data: () => ({
    chartdata: {
      labels: ['Slabs', 'Beams', 'Columns', 'Foundation', 'Core'],
      datasets: [
        {
            data: [this.carbonDataChart.slabs, this.carbonDataChart.beams, this.carbonDataChart.columns, this.carbonDataChart.foundations, this.carbonDataChart.core]
        }
      ]
    },
  }),
  mounted () {
    this.renderChart(this.chartdata, this.options)
    console.log("Carbon data from carbon chart")
    console.log(this.carbonDataChart.slabs)
  }
}

When I do this the console logs the correct value, but for the chart I get this error. enter image description here

Could someone help me out?

NHQue
  • 63
  • 5

0 Answers0