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

我一定是误解了为此目的使用方法，或者方法本身的异步调用是不正确的——如果有人能澄清这里的错误的话。

Answer 1

当 promise 返回时，您可以将异步响应存储在 react 数组中。由于它是响应式(Reactive)的， 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]}}