vuejs2 - Cannot read property 'forEach' of undefined VueJS Firebase

Question

I use the framework VueJS and the NoSQL Database Firebase. Here I want to display the products' data. And particulary the images of the products stored in the Cloud Firestore in Firebase.

This is the HTML code :

 <div class="col-md-4"v-for="(product, index) in products" :key="index">
                  <div class="card product-item">

                        <carousel :perPage="1">
                          <slide v-for="(image, index) in product.images" :key="index">
                                <img :src="image" class="card-img-top" alt="..." width="250px">
                          </slide>
                        </carousel>
                
                        <div class="card-body">
                          <div class="d-flex justify-content-between">
                            <h5 class="card-title">{{ product.name }}</h5>
                            <h5 class="card-prices">{{ product.price }} €</h5>

                          </div>
                           
                           <button class="btn btn-primary mx-3 butn" >
                                Add to cart
                            </button>
                            
                        </div>
                    </div>
              </div>

and the js script :

<script>
import {db} from '../../firebase';
export default {
  name: "Productslist",
  props: {
    msg: String
  },
data(){
    return {
        products: [],
    }
  },  
  firestore() {
    return {
      products: db.collection("products")
    }
  }
  },

};
</script>

It displays the products data like the name and the price but not the images. I have a Cannot read property 'forEach' of undefined.

question from:https://stackoverflow.com/questions/65886551/cannot-read-property-foreach-of-undefined-vuejs-firebase

Answer 1

Probably one of the products have images set to undefined

product.images = undefined