Javascript 无法读取属性'；reactiveProp'；vue chartjs中未定义的

我正在尝试使用一个名为“Vue Chartjs”的组件创建一个折线图。 但是当我尝试使用折线图的演示时。发生了一个错误。 我得到：Uncaught TypeError:无法读取未定义的属性'reactiveProp'

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>

仪表板

随机化
从“../charts/LineChart”导入折线图
导出默认值{
组成部分：{
线条图，
},
数据（）{
返回{
数据收集：null
}
},
挂载（）{
这是fillData（）
},
方法：{
fillData（）{
this.datacollection={
标签：[this.getRandomInt（），this.getRandomInt（）]，
数据集：[
{
标签：“数据一”，
背景颜色：“#f87979”，
数据：[this.getRandomInt（），this.getRandomInt（）]
}, {
标签：“数据一”，
背景颜色：“#f87979”，
数据：[this.getRandomInt（），this.getRandomInt（）]
}
]
}
},
getRandomInt（）{
返回Math.floor（Math.random（）*（50-5+1））+5
}
}
}

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

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

---

您可以更进一步，从混合物中提取reactiveProp

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

---

最后，我通过清除package-lock.json，删除node_模块来修复它 跑

npm安装vue chartjs chart.js--保存

及 跑

npm安装

---

没关系

最后，我通过清除package-lock.json，删除node_模块来修复它 跑

npm安装vue chartjs chart.js--保存

及 跑

npm安装

---

没关系

谢谢兄弟，但是当我实现它时，你的代码有一个语法错误：（@KiênĐinh什么错误？我在写javascript，但上面似乎是typescript，对吗？@KiênĐinh不是，它是普通的javascript。它叫做DestructuringHanks bro，但是当我实现它时，你的代码有一个语法错误：（@KiênĐinh什么错误？我在写javascript，但上面似乎是typescript，对吧？@KiênĐinh不，它是普通的javascript。它被称为destructuring