子组件的计算属性报错 [Vue warn]: Error in render: “RangeError: Invalid array length”
这里的pageNo, continues, totalPages 均为父组件传递给子组件的数据,出现错误的原因是这些数据是父组件通过axios请求的得到的,传递给子组件的时候数据可能还没有从服务器发送回来,所以pageNo, continues, totalPages为undefined,计算属性startAndEndNum()对undefined进行运算,就会报错。
props: ["total", "pageSize", "pageNo", "continues","totalPages"],
startAndEndNum() {
const { pageNo, continues, totalPages } = this;
//连续页码的开始数字|结束数字
let start = pageNo - parseInt(continues / 2);
let end = pageNo + parseInt(continues / 2);
//还有一些不符合条件的需要纠正数字
//pageNO 1 2
if (start <1) {
start = 1;
end = continues;
}
//pageNo 32 33
if (end > totalPages) {
end = totalPages;
start = totalPages - continues + 1;
}
//当前这个计算属性。需要把开始与结束数字返回,只能返回一个对象
//底下的对象:KV一致省略V
return [start, end] ;
}
解决的办法也很简单,就是给这些undefined的属性赋初始值,等异步请求结束后再赋请求回来的数据,由于props的属性是单向数据流,故要单独用变量保存这些props属性再赋初值。
let page = pageNo||0
let total = totalPages||0
let num = continus||0
用page, total ,num来替代pageNo, continues, totalPages 去计算startAndEndNum