获取数组中每一项的数据

Question

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

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

用于可视化： Content (blogPost.content)

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

<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内容应该包含您的产品数据。