vue.js - 渲染中的Vue错误: “RangeError: Invalid array length”

Vue:第2版。*

在我的项目中vuejs
我使用v-for范围
与计算

计算的

computed: {
   numberOfPages() {
         const result = Math.ceil(this.collection.total / this.collection.per_page)
         return (result < 1) ? 1 : result
    }
},

模板

<li class="waves-effect" v-for="(number,index) in numberOfPages"
    :key="index" :class="collection.current_page == number ? 'active' : ''"
     @click="currentPage(number)">
   <a class="">{{number}}</a>
</li>

错误控制台

1-[Vue warn]: Error in render: "RangeError: Invalid array length"
2-RangeError: Invalid array length

最佳答案

最有可能解决您的问题的原因是您的计算属性返回NaN或Infinity。没有看到所有代码，最可能的原因是以下之一:

您将collection初始化为一个空对象。 const result = Math.ceil(undefined / undefined)将返回NaN

您可以正确地防止在结果输入之前计算属性，但是填充collection的服务器的响应的per_page为0。上面提到的计算将返回Infinity，而Vue将无法从中创建一个范围。

有多种方法可以解决此问题。最简单的方法是，如果可以确定per_page始终是> 0，则将v-if放在循环周围的元素上。如果没有方便的元素，则可以使用<template>元素来放置它。

否则，您可以检查要计算的属性是否正确，是否正确，否则返回默认数字。

numberOfPages() {
  if (
    !this.collection ||
    Number.isNaN(parseInt(this.collection.total)) ||
    Number.isNaN(parseInt(this.collection.per_page)) ||
    this.collection.per_page <= 0
  ) {
    return 0;
  }

  const result = Math.ceil(this.collection.total / this.collection.per_page)
  return (result < 1) ? 1 : result
}