Vue模板报错‘Cannot read properties of null’但关联数组已定义，如何解决？

• 核心是模板渲染时机与数据初始化的冲突：Vue初始化阶段会优先执行模板渲染，此时info还是你设置的初始值null，直接访问info.name自然会触发“无法读取null的属性”的错误。
• 后续API请求完成后info会被更新为目标对象，模板也会重新渲染，但第一次渲染的报错已经产生。而直接渲染{{ this.info }}时，Vue会自动处理null值（初始显示为空），等数据更新后再展示对象内容，所以不会报错。

• 使用可选链操作符：把模板里的访问方式改成{{ this.info?.name }}，当info为null或undefined时，会直接返回undefined，不会抛出错误，数据更新后自动显示name的值。
• 通过v-if做存在性判断：在包含info.name的元素上添加v-if="info"，确保只有info存在时才渲染该部分内容：

  <div v-if="info">
    {{ info.name }}
  </div>
  

• 初始化info为空对象而非null：把初始值从null改成{}，这样info.name初始时会是undefined，不会触发报错，数据更新后直接覆盖为目标对象：

  data() {
    return {
      info: {}
    }
  }
  

内容的提问来源于stack exchange，提问作者Jean-Loup