使用vue-chart渲染响应式图表时出现“data未定义”问题求助

你遇到的问题核心其实很明确：第一种用reactiveProp混入的写法能正常跑，自己手写的第二种却报Property or method 'data' is not defined——这是因为reactiveProp偷偷帮你做了一堆关键工作，而你自己写的时候没补上这些步骤。

先给你拆解下第一种可运行代码的门道：
你引入的reactiveProp是vue-chartjs提供的一个混入，它的核心作用就是帮你省事儿：

• 自动在组件内部创建一个响应式的chartData data属性
• 监听你传入的chartData props，一旦props更新，自动同步到内部的chartData
• 最关键的是，它会把这个内部的chartData自动映射到图表初始化需要的data参数上，所以你不用自己操心引用的问题

而你自己写第二种写法时，大概率踩了这两个坑之一：

1. 组件内部根本没定义data属性，就直接在mounted里调用this.renderChart(this.data, ...)——这个this.data完全是没定义的变量，当然会报错
2. 虽然传了chartData props，但没把它赋值给组件的响应式变量，也没在renderChart里正确引用这个props

举个你可能写错的例子（错误示范）：

<script>
import { Doughnut } from 'vue-chartjs'
export default {
  extends: Doughnut,
  props: ['chartData', 'options'],
  mounted() {
    // 这里的this.data根本不存在！
    this.renderChart(this.data, this.options)
  }
}
</script>

那第二种写法该怎么改才对？给你两种方案：

方案一：手动实现响应式（和reactiveProp效果一致） #

如果需要数据更新后图表自动重新渲染，就手动做props和内部data的同步：

<script>
import { Doughnut } from 'vue-chartjs'
export default {
  extends: Doughnut,
  props: ['chartData', 'options'],
  data() {
    return {
      localChartData: this.chartData // 把props存到内部响应式data里
    }
  },
  watch: {
    chartData(newData) {
      this.localChartData = newData
      this.renderChart(this.localChartData, this.options) // 数据更新后重新渲染
    }
  },
  mounted() {
    // 初始化时用内部的响应式数据
    this.renderChart(this.localChartData, this.options)
  }
}
</script>

方案二：直接用props（简单无响应式） #

如果你的图表数据不需要动态更新，直接用传入的props就行：

<script>
import { Doughnut } from 'vue-chartjs'
export default {
  extends: Doughnut,
  props: ['chartData', 'options'],
  mounted() {
    // 直接用this.chartData代替不存在的this.data
    this.renderChart(this.chartData, this.options)
  }
}
</script>

最后再总结下：
你报错的核心就是自己写的代码里错误引用了未定义的this.data，而reactiveProp混入帮你自动处理了数据的映射和响应式逻辑，所以第一种写法没问题。只要把this.data换成正确的数据源（内部响应式变量或者props），错误就解决啦～

内容的提问来源于stack exchange，提问作者Adrian Duran Barcala