Vue Error in render: "RangeError: Invalid array length"

Question

Vue: v2.*

在我的项目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

Answer 1

您的问题最有可能的候选者是您计算出的属性 returns NaN 或 Infinity。没有看到您的所有代码，最可能的原因是以下之一：

您将 collection 初始化为空对象。 const result = Math.ceil(undefined / undefined) 将 return NaN
您确实正确地阻止了在结果出现之前计算属性，但是填充 collection 的服务器的响应具有 per_page 的 0 .上面提到的计算将 return Infinity，而 Vue 将无法从中创建一个范围。

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

否则你可以检查你计算的属性如果你要计算的数据实际上是正确的，否则 return 默认数字。

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
}

Answer 2

正如其他人所说，请仔细检查您的计算属性。我有两种不同的 "interesting" 情况（我引入的错误）：

(1) 首先，我忘记在计算的属性中包含 "return" 关键字！所以我在做：

```
myComputedProp () {
    arr.length
}
```

这应该是 return arr.length ... 容易被忽视:-)

(2) 其次，我的计算结果（我用作数组 length/size）不是整数而是实数（破数）。解决方案当然是添加 Math.round() 或 Math.trunc() ... :-)

Vue Error in render: "RangeError: Invalid array length"

Vue Error in render: "RangeError: Invalid array length"

vue.js

v-for