未捕获(承诺)TypeError:无法使用Vuejs读取chartjs中未定义的属性“长度" [英] Uncaught (in promise) TypeError: Cannot read property 'length' of undefined in chartjs with Vuejs

问题描述

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

I am trying to display particular chart in my App.vue from Charts.vue, Below is what I tried to achieve:

Charts.vue

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

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

  ....

}
</script>

App.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}

    ....

}

未显示任何内容，并且在控制台中出现此错误:

Nothing is displayed, and i get this error in my console:

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

But suppose if i declare as <canvas ref="chart1"></canvas> in template of Charts.vue and then if i just use <charts/> in my template of App.vue, then the chart is displayed.

请帮我解决这个问题.

推荐答案

这不仅仅是错字吗?-您正在导入图表"，但将其用作图表".

Isn't this just a typo? - you are importing "chart", but using it as "charts".

这篇关于未捕获(承诺)TypeError:无法使用Vuejs读取chartjs中未定义的属性“长度"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！