如何使用Vue.js正确展示嵌套对象中的全部列表数据？

你现在的核心问题是没正确处理嵌套数组的遍历逻辑——你的secondLevel是数组类型，但原模板里直接把它当成单个对象来访问属性了，这就导致嵌套的数据没法正常渲染。我帮你调整模板代码，就能实现你想要的展示效果：

修正后的Vue模板 #

<template>
  <div id="builder">
    <div class="container">
      <ul>
        <!-- 遍历最外层的items数组 -->
        <li v-for="(item, idx) in items" :key="idx">
          {{ item.firstName }}
          <!-- 遍历当前item下的secondLevel数组 -->
          <ul>
            <li v-for="(secondItem, sIdx) in item.secondLevel" :key="sIdx">
              {{ secondItem.secondName }}
              <!-- 遍历当前secondItem下的thirdLevel数组 -->
              <ul>
                <li v-for="(thirdItem, tIdx) in secondItem.thirdLevel" :key="tIdx">
                  {{ thirdItem }}
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

关键调整说明 #

1. 第二层循环补全：给item.secondLevel添加v-for循环，因为它是数组而非单个对象，必须遍历每一个secondItem才能拿到对应的secondName和thirdLevel数据。
2. 第三层循环补全：thirdLevel同样是数组，需要通过v-for逐个渲染里面的元素，才能把title、subtitle这类内容逐一展示出来。
3. 添加key属性：Vue要求v-for循环必须绑定唯一的:key值，这里用循环索引作为临时key（如果你的数据有业务唯一ID，用ID会更稳妥），避免渲染时出现警告。

最终渲染效果 #

运行修正后的代码，就能得到你期望的展示样式：

HTML
  HEADER
    title
    subtitle
  ARTICLE
    paragraph
    svg
    image
CSS
  SecondName CSS
    thirdLevel CSS
    thirdLevel CSS
  SecondName CSS 2
    thirdLevel CSS 2
    thirdLevel CSS 2

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