-1

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?

  • Are you sure its a problem with v-show / graf variable? Did you check if the div was rendered? Maybe its the apexchart that has some issues updating, can you confirm? Check it in devtools, if the div with v-shows are showing up or not – Endre Szabó Jan 22 '21 at 20:28
  • the data rendenizam if I decrease or have some interaction in div, the problem is timing, I wanted to know if there is any rule he can expect to render from the graph and then input data – Christian Guimarães Jan 22 '21 at 20:34

1 Answers1

0

Should actually work like this:

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

  .
  . 
  .
  methods: {
     makeCall(){
        this.$http.get('foo')
          .then(response => {
             this.show = true;
         });
     }
  },
  data: {
    show: false
  }
});
Endre Szabó
  • 554
  • 3
  • 9