问题有点不好描述,页面上通过第二个接口的一个数组是否为空为判断条件,
并且同时还通过第一个接口里的一个字段为判断条件
当数组为空的时候,执行第一个接口的判断条件,分两种情况。
当数组不为空的时候,执行第二个接口的判断条件,分两种情况
<div
v-if="strategy.billingStrategyPriceList && strategy.billingStrategyPriceList.length > 0"
class="strategy-price-wrapper"
>
<p v-if="strategy.fChStrategyType == 0">
<span>价格:</span>
<span class="info-price">¥{{ selectedPrice.SellingPrice | NumberFormat }}/天</span>
</p>
<p v-else-if="strategy.fChStrategyType == 1">
<span>价格:</span>
<span class="info-price">¥{{ selectedPrice.SellingPrice | NumberFormat }}</span>
</p>
</div>
<div v-else>
<span>价格:</span>
<span v-if="apiData.PaymentType =='1' && apiData.ApibaseBillingMode!=='0'" class="info-price">
¥{{ apiData.ApibaseBillingMode | NumberFormat }}/次
</span>
<span v-else class="info-price" style="color: #0ec180">免费</span>
</div>
出现的bug是执行顺序的问题导致的,页面一刷新先拿到第一个接口的值,走到判断数组那里
已经是第二步了 ,在一刷新的第一个接口里没有字段可以直接拿来判断。所以就导致当数组有长度的时候还是先走else,然后才会走if里的。
async initData() {
this.spinning = true
const apiId = this.$route.params.id
if (apiId) {
const data1 = await queryApiByID(apiId)
this.ApibaseId = data1.ApibaseId
if (data1) {
const data = await getStrategyByapiId({ apiId: this.ApibaseId })
if (data && data.code == 0 && data.strategyList && data.strategyList.length > 0) {
this.strategy = data.strategyList[0]
if (
isArray(this.strategy.billingStrategyPriceList) &&
this.strategy.billingStrategyPriceList.length > 0
) {
this.selectedPrice = this.strategy.billingStrategyPriceList[0]
}
}
this.apiData = data1
}
}
},
解决方法就是等第二个接口返回值之后,再渲染页面。 this.apiData = data1放在最下面,走完第二个接口后再给第一个接口赋值。