Nuxt中使用BootstrapVue分页拉取API时触发Cannot read property 'length' of null报错

实际报错表现 #

• 运行时控制台抛出错误：TypeError: Cannot read property 'length' of null
• 报错触发的场景非常特殊：只有把自定义计算属性rows绑定到b-pagination组件的total-rows属性时才会触发；如果把相同的posts.length读取逻辑放在页面模板中做列表渲染、或者在控制台手动打印输出，都不会出现报错

现有实现逻辑 #

• 页面引入BootstrapVue的b-pagination分页组件，通过v-model双向绑定currentPage状态，手动配置固定的perPage参数定义单页可展示的条目数
• 组件data初始化阶段，把后端返回的列表数据posts的默认值设置为null
• 配套定义两个核心计算属性：
  • rows计算属性：读取posts的长度值，作为总条目数传递给分页组件的total-rows属性
  • getItemForPagination计算属性：对拿到的posts数组做切片处理，生成对应当前页码的可展示列表项
• 开发预期：通过这套实现让分页组件自动管控列表的展示范围，等后端API异步返回列表数据后，自动完成分页逻辑计算和页面渲染

初步定位的问题根因 #

• 核心触发逻辑：后端API数据加载完成前，posts仍保持初始的null值，此时计算属性中直接读取posts.length，就会触发空值属性读取的报错
• 特殊场景差异的原因：
  • 模板渲染、控制台输出场景下，Vue的模板编译逻辑自带空值容错，遇到null值会直接跳过渲染流程，不会强制触发对空值的属性访问
  • 当rows绑定到b-pagination的total-rows属性时，BootstrapVue组件内部会对传入的数值做强制类型转换、分页值范围计算，此时rows计算属性没有做空值兜底处理，就会直接把空引用的错误向上抛出

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