如何在Vue中正确获取评论数组长度并解决undefined报错

这个报错的根源很明确：组件首次渲染时，你的forum初始值是空数组[]，但你期望它是一个包含comments属性的对象。

当组件刚加载时，mounted钩子还没执行，forum还是[]，这时候你在模板里访问forum.comments，得到的是undefined，再去读length自然就抛出类型错误了。虽然之后mounted里把真实数据赋值给forum，功能能正常运行，但首次渲染的错误会被保留下来。

下面给你几个靠谱的解决办法，选适合你的就行：

1. 初始化forum为匹配数据结构的对象（最推荐） #

直接在data里把forum初始化为一个包含空comments数组的对象，从根源避免comments为undefined的情况：

data() {
  return {
    forum: {
      comments: [] // 预设空数组，确保渲染时comments始终存在
    },
  }
},
mounted() {
  if (this.$page.forum) {
    this.forum = this.$page.forum;
  }
}

这样不管数据有没有加载完成，forum.comments都是一个数组，访问length永远不会报错。

2. 使用可选链操作符简化模板判断 #

如果不想修改初始化逻辑，可以在模板里用ES6+的可选链操作符?.来安全访问属性，当forum.comments不存在时，表达式会返回undefined，不会触发报错：

<div v-if="forum.comments?.length === 0">
  <el-card>
    <p> No comments! </p>
  </el-card>
</div>
<div v-else-if="forum.comments">
  <div v-for="comment in forum.comments">
    <el-card>
      <!-- show comments -->
    </el-card>
  </div>
</div>

注意：如果你的项目环境不支持可选链（比如旧版Vue CLI配置），可以用第三种方法。

3. 先判断forum.comments是否存在 #

在模板里先做一层存在性判断，确保forum.comments是有效数组后再访问length：

<div v-if="!forum.comments || forum.comments.length === 0">
  <el-card>
    <p> No comments! </p>
  </el-card>
</div>
<div v-else>
  <div v-for="comment in forum.comments">
    <el-card>
      <!-- show comments -->
    </el-card>
  </div>
</div>

这里!forum.comments会在comments为undefined或null时触发，直接显示“无评论”，等数据加载完成后会自动切换到正确状态。

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