小编Pau*_*ans的帖子

我正在 vue.js 中处理一个连接到 lumen API（工作）的小项目。

我目前有一个学生列表（'Etudiants'），我可以在列表中单击以选择一个，然后通过工具栏中的按钮将其删除。

当一个学生被删除时，我正在重新加载学生列表（因为它不再是最新的），因此我通过 axios 进行了 2 个 api 调用。

1. 删除 http://www.url.com/etudiants（参数：idEtudiant）
2. 获取 http://www.url.com/etudiants（参数：页面）

问题是我的 API 调用没有按正确的顺序完成，如调用的屏幕截图所示（带有 watterfall）：

这个问题涉及3个vue文件。

' Etudiants.vue ' 和它的 2 个孩子： ' ListeEtudiants.vue '（学生列表）和 ' BarreOutilsEtudiant.vue '（工具栏）

这个简单的图像显示了 3 个文件的层次结构以及所有内容应执行的顺序。

在我的情况下（当它不工作时）动作编号 3，axios DELETE，发生在最后。

以下是我的文件内容：

Etudiants.vue：

<template>
    <div id="etudiants" class="container-fluid h-100">
        <div class="row">
            <div class="col-3 borderR">
                <ListeEtudiants ref="list" @idEtudiantChanged="updateIdEtudiant"/>
            </div>
            <div class="col-9 bg-light">
                <BarreOutilsEtudiant v-if="idEtudiant != null" :idEtudiant="idEtudiant" @delEtudiant="delEtudiant"/>
                <InfosEtudiant v-if="idEtudiant != null" :idEtudiant="idEtudiant"/>
            </div>
        </div>
    </div>
</template> …