Cannot read property 'reactiveProp' of undefined in vue-chartjs

Viewed 827

I'm trying to use a component called "Vue-Chartjs" to create a LineChart. But when i try to use the demo of Line Chart. An error occured. I got: Uncaught TypeError: Cannot read property 'reactiveProp' of undefined

enter image description here

My line-chart.js:

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  }
}

My dashboard.vue :

<template>
 <div class="small">
    <p>Dashboard</p>
    <line-chart :chart-data="datacollection"></line-chart>
    <button @click="fillData()">Randomize</button>
  </div>
</template>
<script>
import LineChart from '../charts/line-chart'
export default {
    components:{
        LineChart,
    },
    data () {
      return {
        datacollection: null
      }
    },
    mounted () {
      this.fillData()
    },
    methods: {
      fillData () {
        this.datacollection = {
          labels: [this.getRandomInt(), this.getRandomInt()],
          datasets: [
            {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: [this.getRandomInt(), this.getRandomInt()]
            }, {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: [this.getRandomInt(), this.getRandomInt()]
            }
          ]
        }
      },
      getRandomInt () {
        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
      }
    }
}
</script>
2 Answers

You can go one step further and extract the reactiveProp out of mixins

import { Line, mixins: { reactiveProp } } from 'vue-chartjs'

Finnaly i fixed it by clear the package-lock.json, remove node_modules run

npm install vue-chartjs chart.js --save

and run

npm install

and it is ok!

Related