虽然报错：Cannot read property ‘xxx’ of undefined” 但是页面能渲染上数据

文章目录

虽然报错：Cannot read property ‘xxx’ of undefined” 但是页面能渲染上数据
1. 【Vue】虽然报错：Cannot read property ‘xxx’ of undefined” 但是页面能渲染上数据
- 1.1问题分析
- 1.2 问题解决方法
总结

1. 【Vue】虽然报错：Cannot read property ‘xxx’ of undefined” 但是页面能渲染上数据

1.1问题分析

首先翻译一下报的错误，cannot read property ‘xxx’ of undefined,就是读取的属性的值为undefined , 我这里显示数据的方式是异步显示(出现这个问题的都是异步导致的)，也就是说先显示的是初始数据，然后等后台把数据传过来再显示后台传过来的数据。初始数据就是我们在vuex中state中或者data中我们开始给xxx赋的值，也就是{}空对象或者是[]空的数组。简单描述一下过程:页面刷新，dom树扫描显示数据，此刻后台数据还没请求过来，只能显示初始数据，而初始值是一个空对象或者空数组，所以info.xxx为undefined，执行控制台报错。而等后台数据返回又会显示后台数据，这也就是报错了也能显示数据的原因。

1.2 问题解决方法

在使用数据的时候,使用v-if去判断是否有值，等到数据从后台返回之后再让它显示。注意：不能用 v-show,因为v-if值为false，就不会编译了，而v-show不管是否为真都会编译，初始值为false，只是将display设为none，但它也进行编译了。

<div class="swiper-container" ref="floor1Swiper" >
    <div class="swiper-wrapper" v-if="floorList[0]">
         <div
            class="swiper-slide"
            :key="item.id"
            v-for="item in floorList[0].carouselList"
            >
           <img :src="item.imgUrl"/>
         </div>
     </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>