Nuxt.js 无法输出接口返回的嵌套对象属性问题解决

报错原因 #

你遇到的Cannot read property 'url' of undefined报错，核心是渲染时尝试访问了不存在的嵌套对象属性，触发原因有两个：

• 初始状态下你定义的mountains是空数组，接口请求完成前mountains.records为undefined，模板首次渲染时直接遍历+访问嵌套属性就会触发报错
• 部分返回的record条目不存在field_77_raw字段，遍历到这类条目时访问其内部属性同样会报错

你直接输出{{mountain.field_77_raw}}不会报错的原因是：Vue渲染顶层属性时，如果属性为undefined会直接输出空值，不会抛出异常；只有尝试访问undefined的子属性时才会触发报错。

正确实现方案 #

方案1：条件判断写法（全版本兼容，无需额外配置） #

注意需要把属性访问的逻辑放在v-for循环内部，之前给出的示例存在嵌套层级错误，v-if判断放在循环外会无法获取mountain变量：

<template>
  <div>
    <!-- 先确认records存在再遍历，同时给v-for绑定唯一key -->
    <div v-for="mountain of mountains.records || []" :key="mountain.id">
      {{ mountain.id }}
      <!-- 确认field_77_raw存在后再访问内部属性 -->
      <div v-if="mountain.field_77_raw">
        原图地址：{{ mountain.field_77_raw.url }}
        缩略图地址：{{ mountain.field_77_raw.thumb_url }}
      </div>
    </div>
  </div>
</template>

方案2：可选链写法（适配Nuxt3/Vue3，或已配置可选链支持的Nuxt2项目） #

写法更简洁，无需额外写条件判断：

<template>
  <div>
    <div v-for="mountain of mountains?.records || []" :key="mountain.id">
      {{ mountain.id }}
      原图地址：{{ mountain?.field_77_raw?.url }}
      缩略图地址：{{ mountain?.field_77_raw?.thumb_url }}
    </div>
  </div>
</template>

遍历嵌套对象所有属性的方法 #

如果你需要把field_77_raw里的所有键值对全部遍历输出，可以直接用v-for遍历对象：

<div v-if="mountain.field_77_raw">
  <div v-for="(value, key) in mountain.field_77_raw" :key="key">
    {{ key }}：{{ value }}
  </div>
</div>

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