vue 在某些情况下数据使用前须判断是否有值

左手的ㄟ右手 2022-04-06 04:48 347阅读 0赞

从商品列表到商品详情页时，要异步请求数据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>

运行时报如下错误：  
![在这里插入图片描述][20181208095643570.png]  
原因是，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还是会渲染的，只是隐藏不让看见

[20181208095643570.png]: /images/20220406/d4ed42b74fc942aebb3627e930c43fe7.png