Vue.js使用axios获取数据后无法访问对象内元素报错求解

错误原因 #

你在data中初始化quotes的值为null，组件首次渲染时，axios异步请求还未返回结果，此时模板执行quotes[0]就相当于读取null的0属性，自然会抛出对应错误。直接输出{{ quotes }}不会报错是因为Vue对null值的渲染默认输出空内容，不会做额外的属性读取操作。

解决方法 #

你可以选择任意一种方案解决问题：

• 方案1：给quotes设置合理的初始值，修改为初始为空数组即可
  修改app.js的data部分代码：

data() {
  return {
    quotes: [], // 把原本的null替换为空数组
  }
}

首次渲染时quotes[0]读取空数组的第0位会返回undefined，Vue渲染undefined为空内容，不会报错，等请求返回后页面会自动更新为对应的数据。

• 方案2：使用可选链运算符规避空值读取
  直接修改index.html的模板代码：

<div id="app">
  <div>
    {{ quotes?.[0] }}
  </div>
</div>

可选链会在quotes为null/undefined时直接返回undefined，不会抛出错误。

• 方案3：添加v-if判断，仅在quotes有值时才渲染对应内容
  修改index.html的模板代码：

<div id="app">
  <div v-if="quotes && quotes.length">
    {{ quotes[0] }}
  </div>
</div>

等待请求返回、quotes有有效值之后才会渲染该节点，避免初始渲染时报错。

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