Vue模板中如何访问data对象内的JSON类型对象属性？

问题描述 #

在Vue.js应用中定义了如下data对象：

data() {
  return {
    group1: {
      id:   'qd4TTgajyDexFAZ5RKFP',
      owners: {
        john:  {age: 32, gender: 'man'},
        mary: {age: 34, gender: 'woman'},
      }
    }
  }
}

模板中可以正常渲染group1.owners，但尝试访问group1.owners.mary.age时，抛出错误：TypeError: Cannot read properties of undefined (reading 'mary')。

问题原因 #

这种报错通常是数据异步加载导致的：实际业务场景中group1大概率是通过接口请求获取的，组件初始化阶段group1或group1.owners可能是undefined或null，模板渲染时链式访问嵌套属性就会触发报错。即便你示例里写了完整的data结构，实际项目中可能未给嵌套对象设置正确的初始值。

解决方案 #

1. 使用可选链操作符（推荐） #

Vue 3及以上版本原生支持可选链操作符?.，直接在模板中使用即可，当某级属性不存在时会返回undefined而不报错：

<p>{{ group1?.owners?.mary?.age }}</p>

如果是Vue 2项目，需安装@vue/composition-api或确保使用Vue 2.6+版本并配置vue-template-compiler支持该语法，也可借助第三方插件实现类似功能。

2. 初始化嵌套空结构 #

在data中给嵌套对象设置初始的空结构，确保模板渲染时不会遇到undefined：

data() {
  return {
    group1: {
      id: '',
      owners: {
        mary: { age: 0 } // 提前初始化需要访问的嵌套属性结构
      }
    }
  }
}

至少给owners初始化为空对象也能避免直接报错：

data() {
  return {
    group1: {
      id: '',
      owners: {}
    }
  }
}

3. 用v-if做存在性判断 #

在渲染嵌套属性前，通过v-if判断父级属性是否存在，确保数据加载完成后再渲染：

<p v-if="group1 && group1.owners && group1.owners.mary">
  {{ group1.owners.mary.age }}
</p>

内容的提问来源于stack exchange，提问作者Joao Alves Marrucho