渲染反应性图表whit vue-chart（未定义属性或方法“数据”）

Question

我已经阅读了几个具有相同错误的示例，但它们并不适合我的情况，我无法理解为什么会出现此错误。 “属性或方法”数据“未定义”，如果我以第一种方式进行，我没有任何问题，但如果我这样做，就像在第二种方式中那样。为什么呢？

非常感谢任何帮助

第一种方式（这是有效的）

RenderD.vue

<script>
import { Doughnut, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
  extends: Doughnut,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    this.renderChart(this.chartData, {tresponsive: true,
     maintainAspectRatio: false})
  }
}
</script>

ReactD.vue

<template>
<div class="AngleDisplay">
      <div class="row ">
          <div class="col-xl-12">
            <h2>Angle-Display</h2>
          </div>
        </div>
        <div class="row">
    <RenderD :chart-data="datacollection" class="col-xl-12"></RenderD>
        </div>
     </div>
</template>

<script>
import RenderD from './RenderD'

export default {
  components: {
    RenderD
  },
  data () {
    return {
      datacollection: null
    }
  },
  mounted () {
    setInterval(() => {
      this.fillData()
    }, 100)
  },
  methods: {
    fillData () {
      this.datacollection = {
        labels: ['Speed', 'Blank'],
        datasets: [
          {
            label: ['Speed', 'Blank'],
            backgroundColor: ['#A8201A', '#001427'],
            borderColor: '#001427',
            data: [this.getRandomInt(), this.getRandomInt()]
          }
        ]
      }
    },
    getRandomInt () {
      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
    }
  }
}
</script>

<style>

</style>

RadarMain.vue

<template>
  <div id="RadarMain">
    <div class="container-fluid">
      <div class="row col-xl-12 title">
        <h1 class="col-xl-12 text-center">Arduino-Radar Interface</h1>
      </div>
      <div class="row col-xl-12  ">
        <React class="col-xl-8"></React>
        <div class="col-xl-4 ">
          <div class="row">
            <ReactD :chart-data="data" class="col-xl-12"></ReactD>
          </div>
        </div>
      </div>
     </div>
  </div>
</template>

<script>
import React from './components/React'
import ReactD from './components/ReactD'

export default {
  name: 'RadarMain',
  components: {
    React,
    ReactD
  },
}
</script>
<style>
body {
  background-color: #001427;
  color: #FDFFFF;
}
h1 {
  margin-top: 50px;
  display: block;
}
@media screen and (max-width:1200px) {
  .angle-display {
    display: none;
  }
}
@media screen and (max-width:550px) {
  .title {
    padding-bottom:50px;
  }
}
</style>

第二种方式（这不起作用）

ReactD.vue

<script>
import { Doughnut, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  name: 'ReactD',
  extends: Doughnut,
  mixins: [reactiveProp],
  props: ['options'],
  components: {
  },
  data () {
    return {
      datacollection: {}
    }
  },
  methods: {
    fillData () {
      this.datacollection = {
        labels: ['Speed', 'Blank'],
        datasets: [
          {
            label: ['Speed', 'Blank'],
            backgroundColor: ['#A8201A', '#001427'],
            borderColor: '#001427',
            data: [this.getRandomInt(), this.getRandomInt()]
          }
        ]
      }
    },
    getRandomInt () {
      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
    }
  },
  mounted () {
    this.renderChart(this.chartData, this.options)
    setInterval(() => {
      this.fillData()
    }, 100)
  }
}
</script>

RadarMain.vue

<template>
  <div id="RadarMain">
    <div class="container-fluid">
      <div class="row col-xl-12 title">
        <h1 class="col-xl-12 text-center">Arduino-Radar Interface</h1>
      </div>
      <div class="row col-xl-12  ">
        <React class="col-xl-8"></React>
        <div class="col-xl-4 ">
          <div class="row">
            <ReactD :chart-data="datacollection" class="col-xl-12"></ReactD>
          </div>
        </div>
      </div>
     </div>
  </div>
</template>

<script>
import React from './components/React'
import ReactD from './components/ReactD'

export default {
  name: 'RadarMain',
  components: {
    React,
    ReactD
  }
}
</script>
<style>
body {
  background-color: #001427;
  color: #FDFFFF;
}
h1 {
  margin-top: 50px;
  display: block;
}
@media screen and (max-width:1200px) {
  .angle-display {
    display: none;
  }
}
@media screen and (max-width:550px) {
  .title {
    padding-bottom:50px;
  }
}
</style>