vue.js - Uncaught (in promise) TypeError: Cannot read property 'length' of undefined in chartjs with Vuejs

Question

我正在尝试从 Charts.vue 在我的 App.vue 中显示特定图表，以下是我试图实现的目标：

图表.vue

<template>
  <div class="chart-container">
    <canvas :ref="`chart${chartId}`"></canvas>
  </div>
</template>

<script>
export default {
  props: {
    chartId: {
      type: String,
      required: true
    }
  } 

  ....

}
</script>

应用程序.vue

<template>
  <div class="content-1">
    <chart :chartId="1" />  <-- Here i want to display my chart 1
  </div>

  ....

  <div class="content-8">
    <chart :chartId="8" />  <-- Here i want to display my chart 2
  </div>
</template>

<script>
import chart from './Charts'
export default{
  name: 'App',
  component: {charts}

    ....

}

没有显示任何内容，并且我在控制台中收到此错误：

但是假设如果我<canvas ref="chart1"></canvas>在 Charts.vue 的模板中声明，然后如果我只是<charts/>在 App.vue 的模板中使用，那么图表就会显示出来。

请帮我解决这个问题。

标签： vue.jschart.js

Answer 1

这不只是一个错字吗？- 您正在导入“图表”，但将其用作“图表”。