javascriptvue.jsvuejs2vue-componentlifecycle-hook

Vue lifecycle hook race condition

I have a question regarding the Vue lifecycle hooks. I have some method that I want to call first in a hook, but another method is calling before.

The desired method is loadData() that calls from beforeMount. This method is responsible for API requests. But, it calls after the method getIndex.

The method that calls first is getIndex and I want it to call last:

myFile.vue

<b-form>                
   <app-select
      labelName="Name"
      fieldType="Type"
      :val="getIndex('M','Q',null,null)">
   </app-select>
</b-form>

I tried to call loadData() from mounted(), beforeMounted() but each time it is the second one. Does anyone know the answer? Thanks

Solution

  • One easy way to deal with this is by using v-if to delay the rendering of the <app-select> until the data is ready:

    <app-select v-if="loadedData" ...

    Where loadedData is this.loadedData or whatever data property will be populated when the hook finishes loading. The <app-select> won't begin to render until the data is ready. This is essentially similar to the concept of a watch, but in the template.