为数组的每一项获取数据

Question

我的博文有一个 "content" 数组。在这个数组中是产品的 ID (asin) 和列出的内容。对于每个项目，我想使用 asin-id 进行 api 调用并显示特定产品。

为了测试，我创建了一个方法 getProduct(content.asin)，但这当然不是解决方案。对于每个循环，我只想显示特定的产品，我不想单击按钮来加载数据，我希望自动获取数据。我该怎么做？

可视化：内容数组（blogPost.content）

content: [{ content: "some text", asin: "asinID" }, ...]

HTML

<div v-for="content in blogPost.content" :key="content.id">
  {{ content.asin }}

  <button @click="getProduct(content.asin)">Click</button>

  {{ product }}

  <div v-html="content.content"></div>
</div>

JS

export default {
  data() {
    return {
      blogPost: [],
      product: [],
    }
  },
  async fetch() {
    try {
      const blogPost = await this.$axios.$get(
        `/api/get-post/${this.$route.params.id}`
      )
      this.blogPost = blogPost
    } catch (err) {
      console.log(err)
    }
  },
  methods: {
    async getProduct(asin) {
      try {
        const product = await this.$axios.$get('/api/get-product-from-asin', {
          params: { asin },
        })
        this.product = product
      } catch (err) {
        console.log(err)
      }
    },
  },
}

Answer 1

您可以映射您的 blogPost 内容并为每个项目进行 http 调用。但是效率不高，API应该在主调用中有数据。

但你可以这样做：

blogPost.content.map((content) => {
   content.product = await this.$axios.$get('/api/get-product-from-asin', 
    {
      params: { content.asin },
    });
    return content;
});

现在 blogPost 内容应该包含您的产品数据。

为数组的每一项获取数据

Fetch data for each item of array

nuxt.js