Vue获取对象后访问嵌套属性报错，如何正确获取child值？

问题原因 #

你遇到的报错是因为异步数据加载时机晚于模板渲染：初始data里的object是空对象，fetch请求还没返回数据时，模板已经尝试读取object.parent.child，此时object.parent是undefined，自然无法读取它的child属性，所以抛出Cannot read properties of undefined (reading 'child')错误。而直接写{{object.parent}}不报错，是因为Vue会对undefined做兜底处理，不会抛出异常。

三种可行的解决方法 #

• 方法一：使用可选链操作符（?.）
  这是最简洁的方案，直接用ES2020的可选链语法，当链式调用中某个属性不存在时，会直接返回undefined而不报错：

  <div>{{object.parent?.child}}</div>
  

• 方法二：初始化完整的数据结构
  在data里给object设置和返回数据一致的初始结构，让模板渲染时parent属性始终存在：

  Vue.createApp({
    data(){
      return {
        object: { parent: {} } // 初始化parent为空对象
      }
    },
    mounted() {
      fetch("{SERVER_URL}/someurl.php?=getObject")
        .then((response) => response.json())
        .then((data) => {
          this.object = data;
        })
    }
  })
  

  这样初始渲染时object.parent是一个空对象，读取child只会得到undefined，不会抛出错误，等数据返回后会自动更新为正确值。

• 方法三：用v-if控制渲染时机
  在包裹元素上添加v-if判断，确保只有object.parent存在时才渲染该部分：

  <div v-if="object.parent">{{object.parent.child}}</div>
  

  这种方式会在parent不存在时隐藏该div，直到数据加载完成后再显示。

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