Vue结合Chartjs渲染数据时报Cannot read property 'position'错误

你遇到的报错本质是数组越界访问导致的：

• 你的for循环设置的遍历上限是1000，但后端接口返回的data数组实际长度大概率小于1000，当遍历的索引i超过data的最大索引后，data[i]会变成undefined，此时访问undefined.position就会触发该报错。
• 之所以数据能正常显示，是因为你只需要收集28条有效数据，接口返回的数组长度足够覆盖前28次有效遍历，数据已经成功存入labels和confirmed供图表渲染，但后续的无效遍历依然会执行，所以控制台会抛出错误但功能看起来正常。
• 额外隐藏问题：你使用data[i].position in this.labels判断值是否重复是错误逻辑，JS中in运算符针对数组时判断的是索引是否存在，而非元素值是否存在，会导致你的去重逻辑完全失效。

调整循环逻辑，修复边界判断和去重逻辑即可，修改后的代码如下：

async created() {
  try {
    const { data } = await axios.get("http://localhost:4000/users");
    let c = 0
    // 循环上限改为接口返回数组的实际长度，避免越界访问
    for (let i = 0; i < data.length; i++) {
      // 加一层空值判断，避免后端返回异常数据导致报错
      if (!data[i] || !data[i].position) continue
      const currentPosition = data[i].position
      // 用includes方法判断值是否已存在于labels数组，实现正确去重
      if (this.labels.includes(currentPosition)) {
        continue
      }
      this.labels.push(currentPosition)
      this.confirmed.push(data[i].id)
      c += 1
      if (c === 28) break
    }
    console.log(this.labels)
  } catch (err) {
    // 新增请求异常捕获，避免接口报错导致整个钩子崩溃
    console.error('用户数据获取失败：', err)
  }
}

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