javascript - How to loop trough an array of images within an array in vue js - Stack Overflow

admin管理员组

文章数量:1312773

I would like go display the images inside an array named "image" within another array named product.

So basically if a product contain an array of 3 images i would like to display 3 images ,etc...

here's my code

<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=".5.17/vue.js"></script>

I would like go display the images inside an array named "image" within another array named product.

So basically if a product contain an array of 3 images i would like to display 3 images ,etc...

here's my code

<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./ajax/libs/vue/2.5.17/vue.js"></script>

I im able to display information within the first array example the product title, the product id, but the only way i found to display more images from the second array is to duplicate my code in the vue template and change the value of the index "product.image[0]", "product.image[1]".

There must be a better way to do this...

Thank a lot for the help

• javascript
• arrays
• vue.js

Share Improve this question Follow asked Jan 25, 2019 at 3:39 MaxMax 20611 gold badge66 silver badges1414 bronze badges 1

• Why you did not loop product.image like what you did with products? – Cong Nguyen Commented Jan 25, 2019 at 3:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can iterate over product images using v-for directive, just like you iterate over products:

<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> 

本文标签： javascriptHow to loop trough an array of images within an array in vue jsStack Overflow