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

【问题标题】：Cannot read property 'forEach' of undefined VueJS Firebase无法读取未定义的 VueJS Firebase 的属性“forEach”
【发布时间】：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" 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>

还有js脚本：

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

};
</script>

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

【问题讨论】：

标签： vuejs2 v-for

【解决方案1】：

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

product.images = 未定义

【讨论】：

我查了，都有图片
我发现问题不是 product.images = undefined 而是组件 VueCarrousel 不起作用。
只在运行时调试产品值