Vue/Nuxt中如何使用v-for迭代产品对象内嵌套的对象数组实现列表渲染

问题根因 #

你之前尝试渲染未生效的核心原因：没有对每个产品对象内部嵌套的list数组做二次遍历，直接用{{ product.list }}插值只会把整个对象数组以原始字符串形式打印在页面上，无法拆分生成独立的列表项。

模板修改 #

不需要改动外层产品卡片的遍历逻辑，只需要在预留的空<ul>标签内部，嵌套一层针对当前product下list数组的v-for循环即可，替换后的代码块为：

<ul class="list-disc pl-5">
  <li 
    v-for="(featureItem, featureIdx) in product.list" 
    :key="featureIdx"
    class="text-gray-400 text-sm mb-1"
  >
    {{ featureItem.item }}
  </li>
</ul>

注意事项 #

• 注意循环变量的作用域隔离：内层循环的变量名不要和外层的product变量重名，避免出现变量覆盖的渲染异常
• 这套写法完全支持你为不同产品配置独立属性的需求：后续只需要往对应产品的list数组里新增{item:'要展示的属性内容'}结构的元素，模板会自动把新内容渲染成对应的列表项，不需要修改任何模板代码
• 内层循环的key值优先用数组索引，避免不同产品的属性文本重复时触发Vue的key重复报错
• 现有外层产品遍历用数组索引作为key在静态场景下完全可用，如果后续产品列表会动态增删，可替换为product.name作为key，优化虚拟DOM渲染效率

内容的提问来源于stack exchange，提问作者Hari Patel