Vue通过API获取嵌套数据渲染时可正常展示但控制台报错如何解决？

你遇到的报错是首次页面渲染时嵌套属性访问链路断裂导致的，具体逻辑如下：

• 页面初始渲染时机早于API请求返回：created钩子触发接口请求后，不会等待请求完成就会先执行模板渲染，此时你给userdetails设置的初始值是空数组[]
• 空数组不存在location属性，因此首次渲染执行{{ userdetails.location.location_name }}时，userdetails.location取值为undefined，尝试读取undefined的location_name属性就会抛出控制台错误
• 等接口请求成功后，你将接口返回的对象赋值给userdetails，触发页面重新渲染，此时属性访问链路完整，所以页面可以正常显示location_name的内容
• 额外注意：userdetails存储的是单个用户详情，初始值设为数组本身也不符合数据语义，建议调整为对象类型。

你可以任选以下任意一种方案解决问题：

1. 给userdetails设置符合结构的初始值，保证渲染时属性链路不会断裂

data() {
  return {
    userdetails: {
      location: {}
    },
  };
}

2. 模板中使用可选链操作符，避免访问不存在的属性时报错

{{ userdetails?.location?.location_name }}

3. 给对应渲染节点增加v-if判断，等数据加载完成后再渲染内容

<div v-if="userdetails?.location">
  {{ userdetails.location.location_name }}
</div>

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