如何在vue js中循环遍历数组中的图像数组
Posted
技术标签:
【中文标题】如何在vue js中循环遍历数组中的图像数组【英文标题】:How to loop trough an array of images within an array in vue js 【发布时间】:2019-06-18 21:30:26 【问题描述】:我想在另一个名为 product 的数组中显示名为“image”的数组中的图像。
所以基本上如果一个产品包含 3 张图片的数组,我想显示 3 张图片等...
这是我的代码
<template>
<div class="details">
<div class="container">
<div class="row">
<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>
<img :src="product.image[0]" class="img-fluid">
</div>
</div>
<div class="col-md-12" v-for="(product,index) in products" :key="index">
<div v-if="proId == product.productId">
<img :src="product.image[1]" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default
name: "details",
data()
return
proId: this.$route.params.Pid,
title: "details",
products: [
productTitle: "ABCN",
image: [
require("../assets/images/autoportrait.jpg"),
require("../assets/images/bagel.jpg")
],
productId: 1
,
productTitle: "KARMA",
image: [require("../assets/images/bagel.jpg")],
productId: 2
,
productTitle: "Tino",
image: [require("../assets/images/bagel2.jpg")],
productId: 3
,
productTitle: "EFG",
image: [require("../assets/images/bagel3.jpg")],
productId: 4
]
;
;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
我能够在第一个数组示例中显示产品标题、产品 ID 的信息,但我发现从第二个数组显示更多图像的唯一方法是在 vue 模板中复制我的代码并更改索引“product.image[0]”、“product.image[1]”。
必须有更好的方法来做到这一点......
非常感谢您的帮助
【问题讨论】:
为什么您没有像对产品所做的那样循环 product.image? 【参考方案1】:您可以使用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>
【讨论】:
以上是关于如何在vue js中循环遍历数组中的图像数组的主要内容,如果未能解决你的问题,请参考以下文章