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?