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
  }
});

等待元素加载然后渲染数据（vue.JS）

1 个答案: