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

【问题标题】：Wait for the element to load and then render the data (vue.JS)等待元素加载然后渲染数据（vue.JS）
【发布时间】：2021-04-27 08:10:46
【问题描述】：

我正在尝试设置 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>

我觉得数据处理比渲染快，你会怎么做，一旦后端的请求处理完，他会等待渲染组件再进行数据的组装？

【问题讨论】：

你确定是 v-show / graf 变量的问题吗？您是否检查了 div 是否已呈现？也许它的顶点图表有一些更新问题，你能确认一下吗？在 devtools 中检查它，是否显示带有 v-shows 的 div
如果我在 div 中减少或有一些交互，则数据会合，问题在于时间，我想知道他是否可以期望从图表中呈现任何规则，然后输入数据

标签： javascript vue.js quasar-framework apexcharts

【解决方案1】：

实际上应该像这样工作：

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

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

【讨论】：

v-show 正在工作，问题是数据渲染比图形渲染快，导致图形为空（无数据）