CODEWITHSUNDEEP
vue.jsnuxt.js
Christian Termo
Christian Termo

Reputation: 9

V-for doesn't work in nuxt.js, I'm trying to cycle card component

enter image description hereenter image description here

Dev tools says me: [Vue warn]: Invalid prop: type check failed for prop "product". Expected Object, got Array

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>

card component:

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

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

I m expecting to see two cards I'm trying to render the card component (bootstrap vue) in my index page taking the data from db, so i have 2 products registered in my db and I should see 2 cards in my page but I see only 1 card As just I'm putting the component

vue dev tools says:

product:Array2 0:Object description:"description" id:1 img:"https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=799&q=80" name:"product 1" price:"10.00" 1:Object description:"descrizione" id:3 img:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" name:"prodotto 2" price:"12.00"

so there are 2 products in the array vut if I try to change props type in "array" it doesn't work the same

Upvotes: 0

Views: 417

Answers (1)

kissu
kissu

Reputation: 46769

The state products is an object, containing data.
That one is an array, so the iteration should be

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

That way, the Product component will contain the desired object.

Upvotes: 1

Related Questions