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

当承诺返回时，您可以将异步响应存储在反应性数组中。由于它是反应性的，因此，每个承诺返回后，都会自动显示承诺响应。

执行以下操作：

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

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

1 个答案: