javascript - 无法读取 vue-chartjs 中未定义的属性“reactiveProp”

Question

我正在尝试使用一个名为“Vue-Chartjs”的组件来创建一个 LineChart。但是当我尝试使用折线图的演示时。发生错误。我得到：未捕获的类型错误：无法读取未定义的属性“reactiveProp”

我的 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)
  }
}

我的仪表板.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>

标签： javascriptvue.jschart.js

Answer 1

您可以更进一步，从 mixins 中提取 reactiveProp

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