CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentlifecycle-hook
Evgeny
Evgeny

Reputation: 193

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

Upvotes: 1

Views: 1015

Answers (1)

Dan
Dan

Reputation: 63059

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.

Upvotes: 1

Related Questions