How do I iterate through a array of object which is inside an object as a list in v-for

Question

I want to make a product section with image and a name (title) and li(description) how to iterate through item 1,2,3 in products array such that it shows in li so I can make different objects for different products it doesn't seem to work when I do {{item.list}}

<template>
    <div>
        <section class="text-gray-400 bg-gray-900 body-font">
            <div class="container px-5 py-24 mx-auto">
                <div class="flex flex-wrap -m-4">
                    <div v-for="(product, name) in products" :key="name" class="p-4 md:w-1/3">
                        <div class="h-full border-2 border-gray-800 rounded-lg overflow-hidden">
                            <img class="lg:h-48 md:h-36 w-full object-cover object-center" :src="product.img"
                                :alt="product.name + ' Microscope'">
                            <div class="p-6">
                                <h2 class="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
                                    {{title}}
                                </h2>
                                <h1 class="title-font text-lg font-medium text-white mb-3">
                                    {{ product.name }}
                                </h1>
                                <ul class="list-disc pl-5">
                                    
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Inverted Microscopes',
                products: [{
                        img: 'https://www.magnusopto.com/pub/media/catalog/product/cache/058ef48c3d1e6c9d031a03a4ffde2954/m/a/magnus-microscopes-fl-inverse-led.png',
                        name: 'FL Inverse',
                        list: [
                            {item:'1'},
                            {item:'2'},
                            {item:'3'},
                        ]
                    },
                ]
            }
        },
        head() {
            return {
                title: this.title,
                meta: [{
                    hid: '',
                    name: '',
                    content: ''
                }]
            }
        }
    }
</script>

score 0 · Answer 1 · edited Apr 05 '21 at 18:13

i hope that helps you to understand a loop in a loop.

<template>
  <div>
    <section class="text-gray-400 bg-gray-900 body-font">
      <div class="container px-5 py-24 mx-auto">
        <div class="flex flex-wrap -m-4">
          <div
            v-for="(product, name) in products"
            :key="name"
            class="p-4 md:w-1/3"
          >
            <div
              class="h-full border-2 border-gray-800 rounded-lg overflow-hidden"
            >
              <img
                class="lg:h-48 md:h-36 w-full object-cover object-center"
                :src="product.img"
                :alt="product.name + ' Microscope'"
              />
              <div class="p-6">
                <h2
                  class="tracking-widest text-xs title-font font-medium text-gray-500 mb-1"
                >
                  {{ title }}
                </h2>
                <h1 class="title-font text-lg font-medium text-white mb-3">
                  {{ product.name }}
                </h1>
                <ul class="list-disc pl-5">
                  <li v-for="(listItem, index) in product.list" :key="index">
                    {{ listItem }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "Inverted Microscopes",
      products: [
        {
          img:
            "https://www.magnusopto.com/pub/media/catalog/product/cache/058ef48c3d1e6c9d031a03a4ffde2954/m/a/magnus-microscopes-fl-inverse-led.png",
          name: "FL Inverse",
          list: [{ item: "1" }, { item: "2" }, { item: "3" }],
        },
      ],
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "",
          name: "",
          content: "",
        },
      ],
    };
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

thank you so much it will surely help me understand loops in loops better — Hari Patel, Apr 05 '21 at 18:18

score 0 · Accepted Answer · answered Apr 05 '21 at 18:08

0

Create a nested v-for loop like this:

<li v-for="item in product.list">{{item.item}}</li>

Fully working example: Vue SFC Playground

answered Apr 05 '21 at 18:08

tauzN

5,162
2
16
21

How do I iterate through a array of object which is inside an object as a list in v-for

2 Answers2