Vue计算属性返回NaN：分页功能totalPages计算异常

可能的原因及对应解决方案 #

1. 变量未正确初始化

如果books初始值不是数组（比如undefined/null），或者itemsPerPage不是有效数字（比如undefined、字符串或0），计算属性执行时就会出现NaN。

解决方法：
确保在data或props中正确初始化变量：

// 若在组件data中定义
data() {
  return {
    books: [], // 初始化为空数组
    itemsPerPage: 10 // 初始化为有效数字
  }
}

// 若为props传递
props: {
  books: {
    type: Array,
    default: () => [] // 用工厂函数返回空数组
  },
  itemsPerPage: {
    type: Number,
    default: 10 // 设置默认数字值
  }
}

2. 计算属性未处理数据加载前的边界情况

如果books是异步获取的（比如从API请求），计算属性会在组件初始化时就执行，此时books可能还未被赋值，导致books.length为undefined，进而计算出NaN。而模板中直接计算能正常显示，是因为模板会在数据更新后重新渲染。

解决方法：
在计算属性中添加边界判断，确保数据有效后再计算：

computed: {
  totalPages() {
    // 过滤无效值，避免NaN
    if (!Array.isArray(this.books) || this.itemsPerPage <= 0) {
      return 0 // 或返回1，根据业务需求调整
    }
    return Math.ceil(this.books.length / this.itemsPerPage)
  }
}

3. 计算属性依赖变量拼写错误

检查计算属性中引用的books和itemsPerPage变量名是否与实际定义的一致，拼写错误会导致访问到undefined，最终计算出NaN。

解决方法：
核对变量名，确保计算属性中的this.books和this.itemsPerPage与data/props中的定义完全匹配。

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