Vue.js如何从多层嵌套数组中获取NHL接口返回的球员姓名？

核心原因 #

你遇到的是Vue异步渲染的典型时序问题：接口请求是异步的，模板第一次渲染时接口还没有返回数据，此时hockeyData是空数组/undefined，直接访问多层嵌套属性会抛出未定义错误，导致后续渲染失效。你能输出hockeyData[0].roster是因为Vue在数据更新后触发了重渲染，而多层属性访问在第一次渲染时就报错阻断了流程。

修复方案 #

• 方案1：使用可选链操作符兜底
  直接修改模板代码为：

  {{ hockeyData?.[0]?.roster?.roster?.[0]?.person?.fullName }}
  

  可选链会在任意一层属性不存在时直接返回undefined，不会抛出错误，等接口数据返回后会自动重渲染出正确的球员姓名。
• 方案2：增加加载状态判断
  在请求发起时声明一个isLoading变量设为true，接口请求完成的回调里把isLoading设为false，模板中渲染球员信息的外层标签增加判断：

  <div v-if="!isLoading && hockeyData.length">
    {{ hockeyData[0].roster.roster[0].person.fullName }}
  </div>
  

  保证只有数据加载完成后才会访问嵌套属性，避免报错。

遍历所有球员姓名的示例 #

如果需要输出全部球员的姓名，直接使用v-for遍历即可：

<template>
  <ul>
    <li 
      v-for="(player, idx) in hockeyData?.[0]?.roster?.roster || []" 
      :key="idx"
    >
      {{ player.person.fullName }}
    </li>
  </ul>
</template>

校验方法 #

你可以在接口请求的成功回调里打印console.log(hockeyData[0].roster.roster[0].person.fullName)，如果控制台能正常输出姓名，就证明是时序问题，按上述方案修改即可；如果控制台也报错，说明你存储的hockeyData结构和预期不符，可以打印完整的hockeyData结构对照调整属性名即可。

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