[Vue]“TypeError: Cannot read property ‘0‘ of undefined“的解决方法

小学生也要加班

于 2020-12-01 15:53:37 发布

阅读量8.2k

点赞数 1

分类专栏：自用初级前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44281416/article/details/110437052

版权

初级前端同时被 2 个专栏收录

43 篇文章

订阅专栏

自用

37 篇文章

订阅专栏

博客围绕Vue展开，但具体内容缺失。Vue是前端开发中常用的框架，能帮助开发者高效构建用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原因一：请求不到数据，vue在拿到数据之前就已经渲染完了页面，所以我们采用延迟渲染页面的方法。先获取数据，再渲染页面。
方法：在mouted中，将要执行的函数使用延时setTimeout()方法包裹。

 mouted:{
     setTimeout(() => {
      this.showRingChart()
     }, 1000)
 }

原因二：异步问题，在还没查询完第一个接口时候，就查询第二个接口。第二个接口中有用到第一个接口中的内容，所以会报错。
方法一：在调用第一个接口的时候使用，加上async，await
    async getOwnerUnit() {
      await DistAPI.getOwnerUnit().then((res) => {//此处是调用接口
        if (res.code == 200) {
          this.ownerUnitList = res.data
        }
      })
    },
方法二：针对异步请求，接口请求顺序问题导致报错，使用.then()方法
 created() {
    this.getOwnerUnit().then(() => {//请求完第一个接口之后，再请求第二个接口，完美！！
      this.getFormDetail()
    })
  },