做了一个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是这样使用的
能够正常的切换
有报错吧 报undefined了吧？
这里给出的代码中看不出具体的接口调用后的问题，但盲猜是模板数据中存在undefined造成的，建议在这种可能收到空数据的地方做一个兼容的处理，例如： {{ TodayIHelp.gasoil_sale_liters || 0}}
这种，有效避免接口数据为空等导致的问题；
同时data中最好做一个接收数据的预备，以上述代码为例，加一下处理：
data() {
return {
TodayIHelp: {}, //今日劳效统计
selfIHelp: {}, //自主终端交易统计
LicensePlateTrading: {}, //车牌付交易统计
}，
}，
还有，针对小同学的代码，这里姑且提一个优化建议哈，现在一大堆的true/false,很难维护，自己看起来都费劲，到后面如果菜单多起来就一片混乱、一大堆冗余代码了，
直接用一个变量去控制显示就够了，例如：
data(){
return{
activeName:'SelfHelp'
}
}
上面直接@click="activeName='Deal'"，v-show="activeName==='Deal'"
自己定义好所有的tab名字就OK了
上面这种写法会让自己陷入一种很混乱的局面哈。。
那你 绑定的值变了吗？打印一下看看