组件更新乱序 Vue

Question

这是我使用 Bootstrap、Vue 和 Axios 的以下代码：

设置：

*忽略component_a中的标签内容

main.html

  <div v-if="activeDisplay === 'ep'">

    <component_b @set-active-display="setActiveDisplay" :info="info"></component_b>

  </div>

  <div v-else-if="activeDisplay === 'dashboard'">

    <dashboard></dashboard>

  </div>

  <div v-else-if="activeDisplay === 'activeEp'">

    <component_a :info="info"></component_a>

  </div>

  <div v-else>

    <dashboard></dashboard>

  </div>

问题：

单击表中 B 中的链接后，它正确调用了setActiveDisplay方法和getAPIData。但是，在getAPIData（即 Axios GET 调用）运行后，info（根实例）不会更新为在 B 中的表中单击的单个项目，我从登录到控制台中知道这一点。info（根实例）包含表中的所有对象。（组件 B 是打开网页时首先显示的组件）

然后，网页更改（正确）以显示组件 A（由于activeDisplay设置变量并显示正确的组件），但我可以看到与表中项目数相同的选项卡数。我一瞬间就看到了这一点。然后，组件 A 会更新以显示最初单击的正确选项卡。

我确定这是一个操作顺序问题（因为我是 Vue 的新手），但似乎无法弄清楚为什么info（根实例）对象在运行时未设置为单个项目。我已经在浏览器中运行了调试器，并且getAPIData从未被第二次调用。getAPIData正在获取正确的数据，但就像 Vue 持有从修改信息到渲染组件 A 的getAPIData调用的结果（即使我在单击组件 B 中的链接后要求它更新）

操作顺序

在根信息中使用多个对象在表中渲染 B => 用户单击表中的链接 => 在 B 中调用 setActiveDisplay => 在根中发出事件调用 setActiveDisplay => 在根中调用 setActiveDisplay 的 getAPIData （直到此处正确工作） =>应该更新根info对象到单个项目=> 由于根info对象（并且由于传递给 A 的道具）包含一个来自getAPIData调用的对象，因此使用一个选项卡呈现 A

编辑1：

经过更多调试，我看到在 vue.js开始处理点击后，使用正确的 API url 调用了axios.js 的dispatchRequest 。. . .所以，这个方法完成后，getAPIData 中的this.info = response.data中没有数据。这是我从调试中发现的流程细分：

运行 getAPIData 完成（导致根实例的 info 对象未定义 => vue.js 处理组件 B 中表中项目的单击事件 => axios.js 正在使用完整 URL 调用 dispactRequest 事件 => more vue. js 处理 => 从 getAPIData 函数接收响应并将信息（根）对象设置为响应

所以我看到在显示我需要的数据之前，我需要等待 Axios 调用完成。现在的问题是，我如何在 Vue 中做到这一点？谢谢你。

Answer 1

所以我看到在显示我需要的数据之前，我需要等待 Axios 调用完成。现在的问题是，我如何在 Vue 中做到这一点？我假设您需要在设置之前等待axios.get()调用getApiData()完成this.activeDisplay。为此，首先返回axios.get()(ie, a&nbsp;Promise) 的结果，以便调用者可以await得到它。getAPIData(id,type) {&nbsp; // BEFORE:&nbsp; //axios.get(...)&nbsp; // AFTER:&nbsp; return axios.get(...)}然后制作setActiveDisplay()一个async函数，允许编辑的getApiData()结果await：// BEFORE://setActiveDisplay: function (id, ad) {&nbsp;// AFTER:async setActiveDisplay(id, ad) {&nbsp; if (...) {&nbsp; &nbsp; await this.getApiData(...)&nbsp; }&nbsp; this.activeDisplay = ad}或者，您可以不使用async/await并使用Promise.prototype.then()：setActiveDisplay: function (id, ad) {&nbsp; if (...) {&nbsp; &nbsp; this.getApiData(...).then(() => this.activeDisplay = ad)&nbsp; }}