Wait for the element to load and then render the data (vue.JS)

I am trying to put the v-show condition so that once the data is returned the graph is rendered and the data is filled in, but the graph is blank after the data is returned

my 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,        }     }  

my 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>  

I think the data process faster than the rendering, how would you do once the request to the backend was processed, he would wait for the rendering component and then proceed to assemble the data?

https://stackoverflow.com/questions/65852282/wait-for-the-element-to-load-and-then-render-the-data-vue-js January 23, 2021 at 04:23AM