如何在vue js中循环遍历数组中的图像数组答案

【问题标题】：How to loop trough an array of images within an array in vue js如何在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>

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;

我能够在第一个数组示例中显示产品标题、产品 ID 的信息，但我发现从第二个数组显示更多图像的唯一方法是在 vue 模板中复制我的代码并更改索引“product.image[0]”、“product.image[1]”。

必须有更好的方法来做到这一点......

非常感谢您的帮助

【问题讨论】：

为什么您没有像对产品所做的那样循环 product.image？

标签： javascript arrays vue.js

【解决方案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>

【讨论】：