Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Probably one of the products have images set to undefined

product.images = undefined


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...