如何遍历 object 中的 object 数组作为 v-for 中的列表

Question

我想制作一个包含图片和名称（标题）和 li（描述）的产品部分如何遍历产品数组中的项目 1、2、3，使其显示在 li 中，这样我就可以为不同的产品制作不同的 objects 当我执行 {{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>

Answer 1

我希望能帮助您理解循环中的循环。

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

Answer 2

像这样创建一个嵌套的 v-for 循环：

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

完整的工作示例：Vue SFC Playground

如何遍历 object 中的 object 数组作为 v-for 中的列表

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

javascript

frontend

vue.js

nuxtjs