Vue lifecycle hook race condition

Question

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

score 1 · Accepted Answer · answered Dec 15 '20 at 16:40

1

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.

answered Dec 15 '20 at 16:40

Dan

59,490
13
101
110

Thanks . Will try – Evgeny Dec 15 '20 at 16:44
If I use getIndex() everywhere, how can I postpone the render? – Evgeny Dec 15 '20 at 18:45
Wrap everything in a `
`. Or load the data in the parent of this component and put the `v-if` there, passing the data as a prop: ``
– Dan Dec 15 '20 at 18:53

Vue lifecycle hook race condition

1 Answers1