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)
})
}
}

报错信息如下：
图片说明

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

请各位大佬们帮忙看看问题在哪？应该怎么解决？（如果需要其他信息的话请留言！）

回答

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个数不一样

以上是 VUE TypeError: Cannot read property 'site' of undefined 的全部内容， 来源链接： utcz.com/a/30080.html

回到顶部