Vue.js获取数组长度报错：Cannot read properties of undefined (reading 'length')

核心原因 #

你遇到的Cannot read properties of undefined (reading 'length')报错，本质是代码执行时this.blogs被意外置为undefined，而非初始的空数组[]。结合你的代码和接口返回数据，具体可能的触发点如下：

1. 异步请求的错误处理或赋值错误 #

接口返回的是包含blogs数组的对象（{blogs: [...]}），如果你的实际代码中：

• 请求失败时错误地将this.blogs设为undefined（比如catch回调里写了this.blogs = undefined）；
• 成功回调里赋值错误，比如写成this.blogs = res.data而非this.blogs = res.data.blogs，若请求异常导致res.data为undefined，会直接引发res.data.blogs的报错，后续blogs可能被置为undefined。

2. paginate未定义的连锁影响 #

你的代码中this.paginate没有在data或props中声明，值为undefined。虽然这不会直接触发length的报错，但会导致paginate_total变成NaN，若后续逻辑依赖这个值，可能间接导致blogs被意外修改为undefined。

3. 报错并非来自created钩子的代码 #

created钩子执行时，blogs初始是[]，this.blogs.length为0，不会报错。大概率是模板中存在其他访问blogs.length的代码（比如{{ blogs.length }}或v-for的依赖），当blogs后续变为undefined时，模板渲染触发报错。

修复方案 #

步骤1：规范响应式数据定义 #

在data中声明所有需要的响应式属性，避免直接赋值未定义的变量：

data() {
  return {
    blogs: [],
    paginate: 10, // 根据你的分页需求设置默认每页数量
    paginate_total: 0
  };
},

步骤2：正确处理异步请求与数据赋值 #

确保接口请求的成功/失败回调都正确维护blogs为数组类型，并在数据更新后计算分页总数：

methods: {
  async fetchBlogs() {
    try {
      const res = await axios.get('/api/blogs');
      // 正确取到接口返回的blogs数组
      this.blogs = res.data.blogs;
    } catch (err) {
      // 错误时设为空数组而非undefined
      this.blogs = [];
    }
  },
  calculatePaginateTotal() {
    // 用Math.ceil确保分页总数向上取整（比如12条数据每页10条，需要2页）
    this.paginate_total = Math.ceil(this.blogs.length / this.paginate);
  }
},

步骤3：监听数据变化自动计算分页 #

通过watch监听blogs的变化，数据更新时自动重新计算分页总数，避免在created钩子中基于空数组计算无效值：

watch: {
  blogs() {
    this.calculatePaginateTotal();
  }
},
created() {
  // 组件创建时发起接口请求
  this.fetchBlogs();
}

步骤4：排查模板依赖 #

检查模板中所有用到blogs的地方，确保即使blogs是空数组也能正常渲染，比如：

<!-- 避免直接依赖blogs.length，可添加空数组判断 -->
<div v-if="blogs.length === 0">暂无数据</div>
<div v-else>
  <div v-for="blog in blogs" :key="blog._id">{{ blog._id }}</div>
</div>

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