Vue.js模板中如何处理非必存在对象属性避免报错？

问题场景 #

在Vue模板中访问可能为null/undefined对象的属性时，出现如下致命错误：

TypeError: Cannot read properties of null (reading 'propThatSometimesDoesNotExist')

对应代码示例：

<template>
  <div>
    <img v-if="obj.propThatSometimesDoesNotExist" :src="obj.propThatSometimesDoesNotExist">
  </div>
</template>

由于项目实际需求限制，无法使用计算属性解决，希望保留现有语法逻辑，尝试过可选链obj?.propThatSometimesDoesNotExist但当前无效，需要替代方案。

解决方案 #

1. 适配Vue版本开启可选链支持

• Vue 2.x：默认不支持模板可选链，可升级到Vue 2.7版本（该版本已原生支持可选链操作符）；若无法升级，可安装@vue/composition-api并配置模板编译器支持ES2020语法。
• Vue 3.x：原生支持模板中的可选链语法，直接使用obj?.propThatSometimesDoesNotExist即可。若仍无效，检查项目ESLint或Babel配置是否限制了该语法。

2. 短路求值替代写法

如果暂时无法调整版本或配置，可用逻辑与操作符实现短路判断，避免空值访问：

<template>
  <div>
    <img v-if="obj && obj.propThatSometimesDoesNotExist" :src="obj && obj.propThatSometimesDoesNotExist">
  </div>
</template>

该写法会先验证obj是否存在，仅当obj不为null/undefined时，才会继续访问后续属性。

3. 全局工具函数简化重复判断

针对频繁出现的场景，可全局注册一个安全取值工具函数：

// main.js 全局注册
Vue.prototype.$safeGet = function(obj, propPath) {
  return propPath.split('.').reduce((current, key) => {
    return current?.[key] ?? null;
  }, obj);
}

模板中直接调用：

<template>
  <div>
    <img v-if="$safeGet(obj, 'propThatSometimesDoesNotExist')" :src="$safeGet(obj, 'propThatSometimesDoesNotExist')">
  </div>
</template>

这种方式无需重复编写判断逻辑，适合多场景复用。

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