Vue获取深层嵌套API对象时null/undefined读取错误的优雅解决方案问询

针对你遇到的「API获取深层嵌套对象后，模板访问属性时出现Cannot read property of null/undefined」问题，不用给每个元素加v-if，可以用以下几种更优雅的方式解决：

1. 给ref设置匹配结构的初始值 #

因为project初始是undefined，模板渲染时会直接尝试访问undefined.status.text导致报错。提前给ref定义和返回对象一致的空结构，让属性链始终存在：

const project = ref({
  id: null,
  title: '',
  status: {
    text: '',
    color: ''
  }
  // 其他嵌套属性也按结构初始化空值
})

数据加载完成后，新值会自动覆盖初始结构，模板访问不会报错。

2. 使用可选链操作符?. #

Vue模板支持ES6的可选链语法，直接在模板中用?.逐层访问属性，只要链中某一层为null/undefined，就会停止访问并返回undefined，不会抛出错误：

{{ project?.status?.text }}

这个方法无需修改JS逻辑，仅调整模板即可，是最简洁的处理方式。

3. 用单个v-if包裹所有关联元素 #

如果不想在每个属性上写?.，可以把所有需要访问project属性的元素用一个父级<template>包裹，只加一次v-if判断：

<template v-if="project">
  <div>{{ project.status.text }}</div>
  <span :style="{ color: project.status.color }">{{ project.status.text }}</span>
  <!-- 其他所有依赖project的元素 -->
</template>

这样内部元素都能安全访问属性，不用逐个添加判断。

4. 用computed属性封装深层属性访问 #

如果需要多次访问同一个深层属性，可以通过computed做一层包装，同时还能设置默认值：

import { ref, computed } from 'vue'

const project = ref()
const projectStatusText = computed(() => project.value?.status?.text || '未设置')
const projectStatusColor = computed(() => project.value?.status?.color || '#ccc')

模板中直接使用computed属性即可：

<span :style="{ color: projectStatusColor }">{{ projectStatusText }}</span>

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