Vue3 嵌套JSON对象数据无法正常显示问题咨询

报错原因 #

该报错是异步请求数据时序导致的：组件初始化时country是空对象，此时模板会先执行一次渲染，访问country.president返回undefined，再尝试读取undefined的name属性就会抛出类型错误。而直接输出{{ country }}不会访问深层属性，仅会将空对象转为字符串展示，所以不会报错。

可用解决方法 #

1. 可选链操作符（最推荐，Vue3原生支持）

模板中直接用可选链规避空属性访问，中间任意一层属性为undefined/null时，表达式会直接返回undefined不会抛出错误，异步数据加载完成后会自动更新渲染：

<p>{{ country?.president?.name }}</p>

2. 预设初始数据结构

在data中给country预设匹配的嵌套结构，避免初始访问时属性不存在：

data() {
  return {
    country: {
      president: {}
    }
  }
}

此时初始渲染时country.president是空对象，访问name仅返回undefined不会报错。

3. 条件渲染控制

用v-if判断上层属性存在后再渲染对应内容：

<p v-if="country.president">{{ country.president.name }}</p>

也可以搭配加载状态变量，等axios请求完成后再渲染整块内容：

<template>
  <div v-if="loading">加载中...</div>
  <div v-else>
    <p>{{ country.name }}</p>
    <p>{{ country.president.name }}</p>
  </div>
</template>
<script>
// ...
data() {
  return {
    loading: true,
    country: {}
  }
},
mounted() {
  axios.get('/接口地址').then(res => {
    this.country = res.data
    this.loading = false
  })
}
</script>

4. 逻辑与短路求值（兼容旧版本写法）

不支持可选链的场景下可以用逻辑与做判断：

<p>{{ country.president && country.president.name }}</p>

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