Javascript 如何在vue js中通过数组中的图像数组进行循环

我想在另一个名为product的数组中显示名为“image”的数组中的图像

所以基本上，如果一个产品包含3个图像的数组，我想显示3个图像，等等

这是我的密码

{{product.productTitle}
{{product.productId}
导出默认值{
名称：“详情”，
数据（）{
返回{
proId:this.$route.params.Pid，
标题：“详情”，
产品：[
{
产品名称：“ABCN”，
图片：[
需要（“../assets/images/autoportrait.jpg”），
需要（“../assets/images/bagel.jpg”）
],
产品编号：1
},
{
产品名称：“业力”，
image:[需要（“../assets/images/bagel.jpg”）]，
产品编号：2
},
{
产品名称：“蒂诺”，
image:[需要（“../assets/images/bagel2.jpg”）]，
产品编号：3
},
{
产品名称：“EFG”，
image:[需要（“../assets/images/bagel3.jpg”）]，
产品编号：4
}
]
};
}
};

---

您可以使用

v-for

指令迭代产品图像，就像您迭代产品一样：

<div class="col-md-12" v-for="(product, index) in products" :key="index">
    <div v-if="proId == product.productId">
        <h1>{{product.productTitle}}</h1>
        <h2>{{product.productId}}</h2>
        <div v-for="(image, imageIndex) in product.image">
            <img :src="image" class="img-fluid" :key="imageIndex" />
        </div>
    </div>
</div> 

{{product.productTitle}
{{product.productId}

为什么不循环使用product.image，就像您对产品所做的那样？