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

问题描述

我使用框架 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”。

解决方法

可能其中一款产品的图片设置为未定义

product.images = 未定义