vue+Framework7+echarts时使用tab组件出现的问题

首先贴一下解决问题之前的代码：

    <!-- Switch Between Tabs -->    <f7-buttons class="analysisButton">      <f7-button tab-link="#tabWater" active>水</f7-button>      <f7-button tab-link="#tabElectric">电</f7-button>      <f7-button tab-link="#tabGas">汽</f7-button>    </f7-buttons>    <!-- Tabs -->    <f7-tabs>      <f7-tab id="tabWater" active>        <!--第一个echarts-->      </f7-tab>      <f7-tab id="tabElectric">        <!--第二个echarts-->      </f7-tab>      <f7-tab id="tabGas">        <!--第三个echarts-->      </f7-tab>    </f7-tabs>

出现问题：
在页面加载时这三个tab会同时都加载出来，造成了除active所在的echarts是正常显示，其他两个都可以。
最后的解决方法：

<div class="buttons-row analysisButton">    <a href="#" class="active button" @click="tabWater">水</a>    <a href="#" class="button" @click="tabElectric">电</a>    <a href="#" class="button" @click="tabGas">气</a></div><div v-if="showWater">    <!--第一个echarts--></div><div v-if="showElectric">    <!--第二个echarts--></div><div v-if="showGas">    <!--第三个echarts--></div>

.js

export default {    data() {      return {        showWater: true,        showElectric: false,        showGas: false      }    },    methods: {      tabWater() {        let _this = this;        _this.showWater = true;        _this.showGas = false;        _this.showElectric = false;      },      tabElectric() {        let _this = this;        _this.showWater = false;        _this.showGas = true;        _this.showElectric = false;      },      tabGas() {        let _this = this;        _this.showWater = false;        _this.showGas = false;        _this.showElectric = true;      }    }  }

每个页面在点击按钮选择以后才显示出来。

ps：如果有错误，希望可以提出来~