Javascript 如何在v-for中以列表的形式遍历对象中的对象数组

我想制作一个带有图片、名称（标题）和li（说明）的产品部分 如何迭代products数组中的项1、2、3，使其显示在li中，以便我可以为不同的产品创建不同的对象当我执行{{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>

{{title}}
{{product.name}


导出默认值{
数据（）{
返回{
标题：“倒置显微镜”，
产品：[{
img:'https://www.magnusopto.com/pub/media/catalog/product/cache/058ef48c3d1e6c9d031a03a4ffde2954/m/a/magnus-microscopes-fl-inverse-led.png',
名称：“FL反向”，
名单：[
{项目：'1'}，
{项目：'2'}，
{项目：'3'}，
]
},
]
}
},
总目（）{
返回{
标题：这个，
元：[{
隐藏：''，
名称：“”，
内容：“”
}]
}
}
}

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

{{title}}
{{product.name}


{{listItem}}


导出默认值{
数据（）{
返回{
标题：“倒置显微镜”，
产品：[
{
img：
"https://www.magnusopto.com/pub/media/catalog/product/cache/058ef48c3d1e6c9d031a03a4ffde2954/m/a/magnus-microscopes-fl-inverse-led.png",
名称：“FL反向”，
清单：[{项目：“1”}，{项目：“2”}，{项目：“3”}]，
},
],
};
},
总目（）{
返回{
标题：这个，
元：[
{
隐藏：，
姓名：“，
内容：“，
},
],
};
},
};
#应用程序{
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}

创建一个嵌套的v-for循环，如下所示：

{{item.item}

---

完整的工作示例：

非常感谢，这肯定会帮助我更好地理解循环中的循环