V-for 在 nuxt.js 中不起作用，我正在尝试循环卡片组件

Question

开发工具告诉我： [Vue warn]：无效的道具：道具“产品”的类型检查失败。期望的对象，得到数组

my index page:

<template>
  <div class="container" v-if="loading">loading...</div>
  <div v-else>
    <div v-for="product in products" :key="product.id">
   
      <product :product="product"/>
    </div>
  </div>
</template>

<script>

import Product from '../components/product.vue';

export default {
  components: { Product },
  data() {
    return {
      loading: true,
      products: [],
    };
  },
  async mounted() {
    this.loading = true;
    const response = await this.$axios.$get("/api/products");
    this.products = response;
    this.loading = false;
  },

};
</script>

卡片组件：

<template>
  <b-card>
  </b-card>

</template>
<script>
export default {
props :{
    product:{
        required: true,
        type:Object
    }
}
}
</script>

我期待看到两张卡片 我正在尝试在索引页面中渲染卡组件（bootstrap vue），从数据库中获取数据，所以我在数据库中注册了 2 个产品，我应该在我的页面中看到 2 张卡，但我只看到 1 张卡，就像我一样正在放置组件

vue 开发工具说：

产品：阵列 0：对象 描述：“描述” 编号：1 img:“https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=799&q=80” 名称：“产品1” 价格：“10.00” 1：对象 描述：“描述” 编号：3 img：“https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80” 名称：“产品 2” 价格：“12.00”

所以数组中有 2 个产品，如果我尝试更改“数组”中的 props 类型，它的工作效果不一样

Answer 1

状态

products

是一个对象，包含

data

。
那是一个数组，所以迭代应该是

<div v-for="product in products.data" :key="product.id">

这样，

Product

组件将包含所需的对象。