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

Question

我希望在v-for循环中使用一种方法来调用API，目的是基于UID加载一个对象。

我的方法如下:

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

据我了解，您可以像这样内联包含方法：

{{ getTodo(2) }}

然而，这总是返回[object Promise]。

我一定误解了用于此目的的方法，或者该方法本身中的异步调用不正确 - 如果有人能澄清这里的问题。

- ogot

---

这是一个承诺 - 将值传递给数据而不是返回。 - Estradiaz

Answer 1

当Promise返回时，您可以将异步响应存储在响应式数组中。由于它是响应式的，因此每次Promise返回时，响应都会自动显示。

做类似这样的事情：

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]}}

- andreybleme

---

我永远不会说“做这件事的理想逻辑”。有很多其他解决方案可以得到相同的结果，而且更加简洁。此外，给出的解决方案有一个巨大的缺点：如果用户在此页面停留足够长的时间，它将耗尽内存，因为您的“index”与“uid”没有关联。您可以至少将数据存储在对象中而不是数组中。另一个缺点是您从未“调用”getTodo方法。我会在“mounted”钩子中执行此操作。 - Ulysse BN

好的，你是对的。我已经更新了答案。关于mounted hook，整个流程对我来说不太清楚...这就是为什么我只专注于给他一个可行的选项。感谢你的提醒。 - andreybleme