一颗霸气的小虎牙 2020-07-03 22:11 采纳率: 33.3%
浏览 974
已采纳

VUE TypeError: Cannot read property 'site' of undefined

# 在把后台返回的数据传入data中声明的数组中时,页面提示出: TypeError: Cannot read property 'site' of undefined

问题一:我在data中已经声明了这个属性,但是报错为undefined
问题二:打印data中的数组,却可以打印出来后台传入的数据

以下为问题代码:

//html

<svg class="bodymap">
          <path
            v-for="item in bodysites"
            :key="item.id"
            :id="item.id"
            :d="item.d"
            stroke="#4898ff"
            stroke-width="1px"
            :opacity="item.opacity"
            :transform="item.transform"
            :fill="item.fill"
            @mouseenter="svgenter(item.id)"
            @mouseout="svgout(item.id)"
          ></path>
</svg>
//data(其中一部分,太长了)

data() {
      return {
        buf_opacity: '0',
        site_sum: '0',
        sample_sum: '0',
        bodysites: [
          {
            id: '0',
            site: 'Ear',
            d: "M332.333,237.057c0,0,2.668-2.167,6.334,0s3.666,16.407-6.334,19.204S332.333,237.057,332.333,237.057zM260.667,237.39c0,0-0.333-1.167-3.5-1s-5.5,3.333-5.5,6.333s3.5,12.5,9,13.5S260.667,237.39,260.667,237.39z",
            fill: '#589fff',
            transform: 'translate(-162 -180)'
          },
          {
            id: '1',
            site: 'Nose',
            d: "M296.333,241.557c0,0-4.084,12.917-2.417,15.583s5.25,0,5.25,0S298.834,244.973,296.333,241.557z",
            fill: '#589fff',
            transform: 'translate(-162 -180)'
          }]
created() {
      this.getBodysites()
    },
    methods: {
      getBodysites() {
        this.$axios
          .get('test')
          .then(res => {
            // console.log(res.data.bodysites[0].site)
            // console.log(this.bodysites)
            for (var i = 0; i < res.data.bodysites.length; i++) {
              for (var j = 0; j < res.data.bodysites.length; j++) {
                if (this.bodysites[i].site === res.data.bodysites[j].site) {//报错问题出在这一行
                  this.bodysites[i].opacity = (res.data.bodysites[j].normal / res.data.sample_sum) * 5
                  this.bodysites[i].normal = res.data.bodysites[j].normal
                  this.bodysites[i].abnormal = res.data.bodysites[j].abnormal
                  this.bodysites[i].titletip = res.data.bodysites[j].site
                }
              }
            }
            this.sample_sum = res.data.sample_sum
            this.site_sum = res.data.site_sum
          })
          .catch(error => {
            console.log(error)
          })
      }
        }

报错信息如下:
图片说明

感觉可能和生命周期有关?

请各位大佬们帮忙看看问题在哪?应该怎么解决?(如果需要其他信息的话请留言!)

  • 写回答

2条回答 默认 最新

  • 浴火_凤凰 2020-07-04 01:20
    关注

    this.bodysites在楼主的截图里只有2个对象。
    res.data.bodysites不清楚有几个?
    不过如果res.data.bodysites的元素个数超过2个 那就肯定会报错了。
    if (this.bodysites[i].site === res.data.bodysites[j].site)
    这里的代码i的值只能是0 1 j大于2就会报错
    后来考虑到楼主的截图可能不完整。
    所以我又写了下面的代码
    双层循环的代码改为:

                for (var i = 0; i < this.bodysites.length; i++) {
                  for (var j = 0; j < res.data.bodysites.length; j++) {
                    if (this.bodysites[i].site === res.data.bodysites[j].site) {//报错问题出在这一行
                      this.bodysites[i].opacity = (res.data.bodysites[j].normal / res.data.sample_sum) * 5
                      this.bodysites[i].normal = res.data.bodysites[j].normal
                      this.bodysites[i].abnormal = res.data.bodysites[j].abnormal
                      this.bodysites[i].titletip = res.data.bodysites[j].site
                    }
                  }
                                }
    

    上面的代码应该可以了

    造成错误的原因 是data里的bodysites跟返回的bodysites个数不一样
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥100 用 H.265 对音视频硬编码 (CUDA)
  • ¥20 mpich安装完成后出问题
  • ¥15 multisim仿真
  • ¥15 stm32循迹小车代码问题
  • ¥15 输入一堆单词,使其去重输出
  • ¥15 qc代码,修改和添加东西
  • ¥50 Unity的粒子系统使用shadergraph(内置管线)制作的一个顶点偏移shader,但是粒子模型移动时,顶点也会偏移
  • ¥15 如何用python处理excel的数据(极值标准化)
  • ¥15 三向应力状态求剪应力
  • ¥15 jupyter notebook如何添加libGL.so.1库