Vue项目结合ChartJs与axios实现图表时报读取length属性为undefined错误求助

问题排查与修复方案 #

你遇到的报错由以下3个问题共同导致，对应修复方案如下：

• canvas元素引用错误
  LineChart组件模板内定义的canvas ref为chartLine，但初始化Chart实例时调用了不存在的this.$refs.myChart，无法正确获取DOM元素。
  修复：将Chart初始化的第一个参数修改为this.$refs.chartLine，同时可去掉new Chart前的await，因为Chart构造函数返回的不是Promise，异步等待无意义。

• 异步请求时序不匹配
  父组件在created钩子中发起异步接口请求，子组件mounted钩子的执行时机早于接口请求返回的时机，此时传递给子组件的label和chartData还未完成赋值，默认值为undefined，ChartJS读取数组长度属性时触发报错。
  修复：

  1. 父组件模板中调用LineChart时增加渲染判断，等数据加载完成后再渲染子组件：

  <LineChart v-if="labels.length && confirmed.length" :label="labels" :chartData="confirmed" />
  

  2. 子组件props增加默认空数组配置，避免未传值时为undefined：

  props: {
    label: {
      type: Array,
      default: () => []
    },
    chartData: {
      type: Array,
      default: () => []
    },
  }
  

• 数组包含判断逻辑错误
  父组件中if (data[i].provinceState in this.labels)的写法有误，in运算符用于判断对象的键是否存在，不能用于判断数组是否包含指定元素，会导致重复插入相同省份数据。
  修复：修改为if (this.labels.includes(data[i].provinceState))

内容的提问来源于stack exchange，提问作者Melissa Fuentes Cañar