Vue模板无法访问嵌套数据属性及数据格式相关疑问求助

1. 关于返回数据格式的疑惑 #

你遇到的情况完全正常！这里的核心是res.json()这个方法——它会自动把服务器返回的JSON格式字符串解析成JavaScript对象，所以你根本不需要再手动调用JSON.parse()。

至于你在控制台看到的带引号的格式，那只是浏览器控制台为了方便展示，把JS对象转换成了JSON风格的字符串而已，实际你拿到的data已经是一个可以直接操作的JS对象了。这就是为什么你调用JSON.parse(data)会报错，因为它早就不是JSON字符串了。

2. 模板中无法访问属性的问题 #

这个报错的根源有两个：

• 首先，你初始化data为一个空数组[]，但服务器返回的是一个对象。数组本身没有telegram属性，所以在数据还没加载完成时，模板试图访问data.telegram就会得到undefined，接着访问[0]或者length自然就会触发类型错误。
• 其次，fetch是异步操作，组件模板会先渲染初始状态，这时候请求还没完成，this.data还是你初始化的空数组，所以会出现报错。

解决方案 #

这里有几个简单的修复方法，你可以根据习惯选择：

方法一：修正初始数据类型

把data的初始值改成空对象，和返回数据的结构保持一致：

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

方法二：使用可选链操作符（推荐）

在模板中用?.来安全访问嵌套属性，即使中间某个属性不存在也不会报错：

<p>{{ data?.telegram?.[0] }}</p>
<p>{{ data?.telegram?.length }}</p>

方法三：用v-if做条件渲染

先判断data.telegram是否存在，再渲染对应的内容：

<p v-if="data.telegram">{{ data.telegram.length }}</p>
<p v-if="data.telegram">{{ data.telegram[0] }}</p>

这样就能完美解决异步加载过程中出现的类型错误啦～

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