Vue.js如何按指定索引获取列表元素，使用list[0].title报错怎么办？

• 核心是API请求是异步操作，组件初始化渲染的时候，你定义的list初始是空数组，此时执行list[0].title相当于访问undefined的title属性，自然会抛出未定义错误。
• 常规v-for遍历不会报错是因为空数组遍历的时候不会生成任何节点，不会触发属性访问逻辑。

你可以任选以下任一方案解决：

1. 给初始值加默认结构 #

初始化list的时候直接预设匹配的结构，避免初始访问时空值报错：

// 以Vue2的data配置为例
data() {
  return {
    list: [{ title: '' }]
  }
}

2. 用短路逻辑/可选链做安全访问 #

如果你的项目支持ES2020+语法，直接用可选链运算符：
{{ list[0]?.title }}
如果是不支持可选链的旧环境，用逻辑与短路写法：
{{ list[0] && list[0].title }}

3. 加条件渲染控制 #

只有当list存在有效元素的时候才渲染对应节点：

<div v-if="list.length >= 1">
  {{ list[0].title }}
</div>

4. 用计算属性封装取值逻辑 #

把边界处理逻辑放到计算属性里，模板代码更简洁易维护：

computed: {
  firstItemTitle() {
    return this.list[0]?.title || ''
  }
}

模板直接调用即可：{{ firstItemTitle }}

除非你100%确定接口返回的数组长度永远不会小于你写的索引值，否则不建议用索引硬编码的方式取列表元素，优先加长度判断或者遍历逻辑更稳妥。

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