从商品列表到商品详情页时,要异步请求数据info,代码如下:

<div class="shop-header-discounts">
	<div class="discounts-left">
		<div class="activity" :class="supportClasses[info.supports[0].type]">
			<span class="content-tag">
				<span class="mini-tag">{{info.supports[0].name}}</span>
			</span>
			<span class="activity-content ellipsis">{{info.supports[0].content}}</span>
		</div>
	</div>
	<div class="discounts-right">{{info.supports.length}}个优惠</div>
<div>

运行时报如下错误:
在这里插入图片描述
原因是,info默认初始值为空对象,所以info.supports是undefined,此时不会报错,如果再info.supports[0],那肯定会报如上错误。
所以当取state里的数据时一定要小心,如果初始值为空对象/数组,那么当点(“.”)两次及以上的时候,要加判断info是否有值,代码如下:

<div class="shop-header-discounts" v-if="info.supports">
	<div class="discounts-left">
		<div class="activity" :class="supportClasses[info.supports[0].type]">
			<span class="content-tag">
				<span class="mini-tag">{{info.supports[0].name}}</span>
			</span>
			<span class="activity-content ellipsis">{{info.supports[0].content}}</span>
		</div>
	</div>
	<div class="discounts-right">{{info.supports.length}}个优惠</div>
<div>

此外要注意,此时只能用v-if,不能用v-show,因为v-show还是会渲染的,只是隐藏不让看见

Logo

前往低代码交流专区

更多推荐