Vue 生命周期钩子竞争条件

Question

我有一个关于 Vue 生命周期钩子的问题。我有一些方法想在钩子中首先调用，但之前调用了另一种方法。

所需的方法是从beforeMount 调用的loadData()。此方法负责 API 请求。但是，它在 getIndex 方法之后调用。

首先调用的方法是getIndex，我希望它最后调用：

myFile.vue

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

我尝试从mounted()、beforeMounted() 拨打loadData()，但每次都是第二次。有人知道答案吗？谢谢

Answer 1

解决这个问题的一种简单方法是使用v-if 延迟<app-select> 的呈现，直到数据准备好：

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

其中loadedData 是this.loadedData 或钩子完成加载时将填充的任何数据属性。在数据准备好之前，<app-select> 不会开始渲染。这本质上类似于手表的概念，但在模板中。