等待元素加載然后渲染數據（vue.JS）

Question

我正在嘗試設置 v-show 條件，以便在返回數據后呈現圖形並填充數據，但返回數據后圖形為空白

我的 JS

   methods: {
      refresh(){
         this.loading = true
         this.graf = false 

         this.$axios.get("/Op/Search")
         .then(res => { 
            this.loading = false;
            this.graf = true;    
            this.op = res.data 
            
            this.$refs.chartTypes.updateSeries([{
                name: 'TYPES',
                data: [this.op.cars, this.op.lines, this.op.cors]
             }])
         })
      }
   }
   data() {
      return {
         loading: true,
         graf: false,
      }
   }

我的 html

       <div class="col-7">
          <center v-show="loading" style="margin-top: 90px;"> <loading/> </center>
          <div v-show="graf">
              CARS
          </div>
          <div v-show="graf">
             <apexchart 
                ref="chartTypes"
                style="background: transparent;margin-left: -8px;"
                type="bar"  
                height="300" 
                :options="chartype" 
                :series="seriestypes"
                ></apexchart>
             </div>
       </div>

我覺得數據處理比渲染快，后端的請求處理完，他會等待渲染組件，然后進行數據的組裝，你會怎么做？

Answer 1

實際上應該像這樣工作：

<template>
   <div v-show="show">Test</div>
</template>

  .
  . 
  .
  methods: {
     makeCall(){
        this.$http.get('foo')
          .then(response => {
             this.show = true;
         });
     }
  },
  data: {
    show: false
  }
});