调两个接口的数据,两个接口都有字段要用来判断。bug先出现第一个接口的文字后才出现第二个接口的文字,解决闪现bug

问题有点不好描述,页面上通过第二个接口的一个数组是否为空为判断条件,
并且同时还通过第一个接口里的一个字段为判断条件

当数组为空的时候,执行第一个接口的判断条件,分两种情况。
当数组不为空的时候,执行第二个接口的判断条件,分两种情况

 <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放在最下面,走完第二个接口后再给第一个接口赋值。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值