时间戳

首页 > 解决方案 > Vue 生命周期钩子竞争条件

javascript - Vue 生命周期钩子竞争条件

问题描述

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

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

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

我的文件.vue

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

我试图从 打电话loadData()，mounted()但beforeMounted()每次都是第二个。有人知道答案吗？谢谢

标签： javascriptvue.jsvuejs2vue-componentlifecycle-hook

解决方案

解决此问题的一种简单方法是使用v-if延迟渲染<app-select>直到数据准备好：

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

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

推荐阅读