Javascript Vue.js-内联调用异步方法

我想使用一种方法在v-for循环中进行API调用，目的是基于UID加载对象

我的方法如下所示：

methods: {
  async getTodo(uid) {
  const data = await axios.get(
    "https://jsonplaceholder.typicode.com/todos/" + uid
  );
  return data;
}

}

据我所知，您可以将内联方法包括在内：

{{ getTodo(2) }}

然而，这总是返回[对象承诺]

---

我一定是误解了方法的用途，或者方法中的异步调用本身是不正确的-如果有人能澄清这里的错误。

当承诺返回时，您可以将异步响应存储在反应数组中。因为它是被动的，所以每次承诺返回时，承诺响应将自动显示

做一些类似于：

export default {
  data: {
    asyncDataHolder: []
  },
  methods: {
    async getTodo(uid) {
    const data = await axios.get(
      "https://jsonplaceholder.typicode.com/todos/" + uid
    );
    let index = asyncDataHolder.length + 1;
    asyncDataHolder.$set(index, data);
}

在

v-for

循环中：

{{asyncDataHolder[i]}}

---

这是一个承诺——将值传递给数据，而不是返回。我永远不会说做这种事情的理想逻辑。有很多其他的解决方案可以获得这个结果。此外，给定的解决方案有一个巨大的缺点：如果用户在这个页面上停留的时间足够长，它将爆炸内存，因为您的

索引

与

uid

没有链接。您至少可以将数据存储在对象而不是数组中。另一个缺点是从不调用

getTodo

方法。我会在

mounted

hook中执行此操作。好的，你说得对。我已经更新了答案。关于

挂载的挂钩

，不清楚整个流程。。。这就是为什么我集中精力给他一个可行的选择。请投你的票。