无法读取未定义的 VueJS Firebase 的属性“forEach”

Posted 2023-02-16

【中文标题】无法读取未定义的 VueJS Firebase 的属性“forEach”

【英文标题】：Cannot read property 'forEach' of undefined VueJS Firebase

【发布时间】：2021-04-29 08:43:38

【问题描述】：

我使用框架 VueJS 和 NoSQL Database Firebase。 在这里我想显示产品的数据。尤其是存储在 Firebase 中 Cloud Firestore 中的产品图片。

这是 html 代码：

 <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"  >
                          </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>

还有js脚本：

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

;
</script>

它显示名称和价格等产品数据，但不显示图像。我有一个无法读取未定义的属性“forEach”。

【参考方案1】：

可能其中一种产品的图像设置为未定义

product.images = 未定义

【讨论】：

我查了，都有图片

我发现问题不是 product.images = undefined 而是组件 VueCarrousel 不起作用。

只在运行时调试产品值