vue 在某些情况下数据使用前须判断是否有值
从商品列表到商品详情页时,要异步请求数据info,代码如下:<div class="shop-header-discounts"><div class="discounts-left"><div class="activity" :class="support
·
从商品列表到商品详情页时,要异步请求数据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还是会渲染的,只是隐藏不让看见
更多推荐
已为社区贡献4条内容
所有评论(0)