VueJS 对 v-for 中的每个项目进行 API 调用并将它们返回到正确的位置

Question

提前致谢。

所以我通过 API 获取博客类别列表并使用 v-for 在列表中呈现它。

我还需要获取每个类别中的博客数量并将它们放在类别旁边。

但问题是我正在调用一个调用 api.

的方法

   <li v-for="item in sidebar" :key="item.identifier">
        <nuxt-link
          tag="a"
          :to="{
            name: 'blog-page',
            query: { category: item.identifier }
          }"
          >{{ $localize(item.translations).title }}
          {{ getBlogCount(item.identifier) }}
        </nuxt-link>
   </li>

你知道它已经显示了什么示例是 Animals [Object Promise]

  methods: {
    async getBlogCount(identifier) {
      axios
        .get(
          "https://example.com/posts?fields=created_at&filter[category.category_id.identifier]=" +
            identifier +
            "&meta=*"
        )
        .then(count => {
          return count.data.meta.result_count;
        });
    }
  }

处理这种事情的最佳方法是什么？

Answer 1

我建议在脚本中处理此问题，而不是 HTML 模板。

你可以做的是，根据边栏初始化的时间（可能在安装的钩子中），调用 getBlogCount 方法来获取边栏中每个项目的博客计数，并存储可能在数组中或对象（或作为同一侧边栏项目对象的单独键值对），然后使用该数据结构在模板中显示计数值。

假设侧边栏填充在 mounted hook 中并且它是一个对象数组，您可以执行以下操作：

<template>
   <li v-for="item in sidebar" :key="item.identifier">
        <nuxt-link
          tag="a"
          :to="{
            name: 'blog-page',
            query: { category: item.identifier }
          }"
          >{{ $localize(item.translations).title }}
          {{ item.blogCount }}
        </nuxt-link>
   </li>
</template>

<script>
mounted () {
  // after the sidebar is populated
  this.sidebar = this.sidebar.map(async item => {
    item.blogCount = await this.getBlogCount(item.identifier)
    return item
  })
}
</script>

希望对您有所帮助

Answer 2

你最好在挂载或创建的钩子中调用异步方法，并将结果设置为数据，然后在模板中使用该数据。

VueJS 对 v-for 中的每个项目进行 API 调用并将它们返回到正确的位置

VueJS making API calls for every item in v-for and returning them to the right position

vue.js

vuejs2

nuxt.js

vuejs3

nuxtjs