使用v-show的时候，点击时，true和false能变化，但是视图为什么不变化？

Question

问题遇到的现象和发生背景

做了一个tab切换，用v-show做显示隐藏，刚做好的时候，点击的时候，能够正常切换，但是调用接口后，就不行了，但是页面还未加载完毕和接口有数据时就可以点击，很奇怪？

问题相关代码，请勿粘贴截图

   <div class="tabControl">
      <div class="options">
        <el-button
          type="text"
          class="efficacy"
          @click="onEfficacy(3)"
          :class="{ bg: time == 3 }"
          >今日劳效统计</el-button
        >
        <el-button
          type="text"
          class="selfHelp"
          @click="onSelfHelp(4)"
          :class="{ bg: time == 4 }"
          >自助终端交易统计</el-button
        >
        <el-button
          type="text"
          class="deal"
          @click="onDeal(5)"
          :class="{ bg: time == 5 }"
          >车牌付交易统计</el-button
        >
      </div>
      <-- 今日劳效统计 -->
      <div class="myEfficacy" v-show="myEfficacy1">
        <-- 左边环比 -->
        <span class="perCapita"
          ><b>{{ TodayIHelp.average_order_num }}</b> 次
          <p>人均提枪</p></span
        >
        <span class="onYear"
          >同比：<b>{{ TodayIHelp.average_order_num_rate }}</b> %
          <i class="el-icon-top"></i
        ></span>
        <span class="linkRelativeRatio"
          >环比：<b>{{ TodayIHelp.average_order_num_chain_rate }}</b> %
          <i class="el-icon-bottom"></i
        ></span>
        <div class="striping"></div>
        <span class="gasoline"
          >汽油：<b>{{ TodayIHelp.gasoil_order_num }}</b></span
        >
        <span class="diesel"
          >柴油：<b>{{ TodayIHelp.diesel_order_num }}</b></span
        >
        <-- 右边环比 -->
        <span class="dailySales"
          ><b>{{ TodayIHelp.average_sale_liters }}</b> 吨
          <p>人均日销量</p></span
        >
        <span class="myOnYear"
          >同比：<b>{{ TodayIHelp.average_sale_liters_rate }}</b> %
          <i class="el-icon-top"></i
        ></span>
        <span class="myInkRelativeRatio"
          >环比：<b>{{ TodayIHelp.average_sale_liters_chain_rate }}</b> %
          <i class="el-icon-bottom"></i
        ></span>
        <div class="myStriping"></div>
        <span class="myGasoline"
          >汽油：<b>{{ TodayIHelp.gasoil_sale_liters }}</b></span
        >
        <span class="myDiesel"
          >柴油：<b>{{ TodayIHelp.diesel_sale_liters }}</b></span
        >
      </div>
      <-- 自主终端交易统计 -->
      <div class="mySelfHelp" v-show="mySelfHelp1">
        <span class="todaySNumber"
          ><b>{{ selfHelp.opP }}</b> 笔
          <p>今日交易笔数</p></span
        >
        <span class="transactionAmountToday"
          ><b>{{ selfHelp.hwSj }}</b> 元
          <p>今日交易金额</p></span
        >
      </div>
      <-- 车牌付交易统计 -->
      <div class="myDeal" v-show="myDeal1">
        <span class="numberOfTransactionsToday"
          ><b>{{ LicensePlateTrading.order_num }}</b> 笔
          <p>今日交易笔数</p></span
        >
        <span class="myTransactionAmountToday"
          ><b>{{ LicensePlateTrading.order_amount }}</b> 元
          <p>今日交易金额</p></span
        >
      </div>
    </div>

 data() {
    return {
      myEfficacy1: true, //今日劳效统计
      mySelfHelp1: false, //自主终端交易统计
      myDeal1: false, //车牌付交易统计
      time: 3,}，
}，
methods：{
    // 今日劳效统计的点击事件
    onEfficacy(index) {
      if (index === 3) {
        this.time = index;
        console.log(3333);
      }
      console.log(333);
      this.myEfficacy1 = true;
      this.mySelfHelp1 = false;
      this.myDeal1 = false;
    },
    // 自主终端交易统计的点击事件
    onSelfHelp(index) {
      if (index === 4) {
        this.time = index;
        console.log(4444);
      }
      console.log(444);
      this.mySelfHelp1 = true;
      this.myEfficacy1 = false;
      this.myDeal1 = false;
    },
    // 车牌付交易统计的点击事件
    onDeal(index) {
      if (index === 5) {
        this.time = index;
        console.log(5555);
      }
      console.log(555);
      this.myDeal1 = true;
      this.myEfficacy1 = false;
      this.mySelfHelp1 = false;
    },
}

运行结果及报错内容

页面加载完，没有数据时，点击切换时，数值有变化，但是视图没有更新

我的解答思路和尝试过的方法

排查过许多，没有发现有问题。正常的v-show是这样使用的

我想要达到的结果

能够正常的切换

Answer 1

有报错吧 报undefined了吧？