title: Vue JS waiting for data before rendering
body: <p>I'm stuck since a few weeks in a problem with rendering data with VueJS.</p>
  <p>What I'm doing is making some axios calls (one inside another). My problem is that the data is rendered before the calls has completed, so the view is not showing anything.</p>
  <p>I saw some codes that do some &quot;await&quot; and &quot;Async calls&quot; but nothing seems to solve my problem.</p>
  <p>Also there is something similar here
  <a href="https://stackoverflow.com/questions/49477230/get-component-to-wait-for-asynchronous-data-before-rendering">Get component to wait for asynchronous data before rendering</a>
  But isn't working either</p>
  <p>here is my code:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;template&gt;
       &lt;div class=&quot;m-portlet m-portlet--full-height&quot; m-portlet=&quot;true&quot; id=&quot;m_portlet_validate_agenda&quot;&gt;
      ...
      &lt;div class=&quot;m-portlet__body&quot;&gt;
          &lt;div class=&quot;tab-content&quot;&gt;
              &lt;div class=&quot;tab-pane active&quot; id=&quot;m_widget2_tab1_diagnose&quot;&gt;
                  &lt;div class=&quot;m-widget2&quot;&gt;
                      &lt;div v-for=&quot;diagnose in diagnoses&quot; v-if=&quot;diagnoses.length&quot; :class=&quot;'m-widget2__item m-widget2__item--' + diagnose.delayColor[0]&quot;&gt;
                          &lt;div class=&quot;m-widget2__checkbox&quot; &gt;
                              &lt;label class=&quot;m-checkbox m-checkbox--solid m-checkbox--single m-checkbox--brand&quot;&gt;
                                  &lt;span class=&quot;m--bg-white&quot; v-html=&quot;diagnose.concurrence&quot;&gt;&lt;/span&gt;
                              &lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;m-widget2__agenda col-2&quot;&gt;
                              {{ diagnose.started_at | moment(&quot;HH:mm A&quot;) }}
                          &lt;/div&gt;
                          &lt;div class=&quot;m-widget2__desc&quot; v-if=&quot;!isFetching&quot;&gt;
                              &lt;div&gt;
                                  &lt;span class=&quot;m-widget2__text&quot;&gt;
  
                                  &lt;/span&gt;&lt;br&gt;
                                  &lt;span class=&quot;m-widget2__user-name&quot;&gt;
                                      &lt;a href=&quot;#&quot; class=&quot;m-widget2__link m-link&quot;&gt;
                                      Paciente: 
                                      {{ diagnose.details[0].name }}
                                      &lt;/a&gt;&lt;br&gt;
                                      &lt;a href=&quot;#&quot; class=&quot;m-widget2__link m-link&quot;&gt;
                                      Tratante: 
  
                                      &lt;/a&gt;
                                  &lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
         &lt;/div&gt;
       &lt;/div&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
      export default {
  
          data() {
              return {
                  events: [],
                  diagnoses: [],
                  urgencies: [],
                  treatments: [],
                  isFetching: true
              }
          },
  
          mounted() {
              this.loadData();
          },
  
          methods: {
  
              loadData: async function() {
                  await axios.get('/pacientes/request-json/agenda/validarAsistencia/eventos').then(res =&gt; {
                      this.events = res.data;
                      this.diagnoses = [];
                      this.urgencies = [];
                      this.treatments = [];
                      this.getDetails();
                      this.getDelayColor();
                      this.getConcurrence();
                      vm.$nextTick(function () {
                          $('[data-toggle=&quot;m-tooltip&quot;]').tooltip();
                      });
                      console.log('end LoadData');
                  });
              },
  
              getDetails: function() {
                  console.log('cargando');
                  this.events.forEach(event =&gt; {
                      axios.get('/pacientes/request-json/agenda/validarAsistencia/eventos/' + event.id).then(res =&gt; {
                          event.details = res.data;
                          console.log(res.data);
                      });
                  });
                  this.distributeEvents();
                  console.log('montado');
              },    
  
              distributeEvents: function() {
                  this.events.forEach(event =&gt; {
                      if ( event.event.event_type == &quot;diagnosis&quot; )
                      {
                          this.diagnoses.push(event);
                      }
                      else if ( event.event.event_type == &quot;urgency&quot; )
                      {
                          this.urgencies.push(event);
                      }    
                      else if ( event.event.event_type == &quot;treatment&quot; )
                      {
                          this.treatments.push(event);
                      }
                  });
                  this.isFetching = false;
              },
  
              getDelayColor: function() {
                  this.events.forEach(event =&gt; {
                      do something...
                  });
              },
  
              getConcurrence: function() {
                  this.events.forEach(event =&gt; {                    
                      do something...
                  });
              },
  
              diffMinutes: function(started_at) {
                  do something...
              }
  
          }
  
      }
  </code></pre>