渲染中的 Vue 错误：“RangeError：无效的数组长度”

Posted 2023-02-16

【中文标题】渲染中的 Vue 错误：“RangeError：无效的数组长度”

【英文标题】：Vue Error in render: "RangeError: Invalid array length"

【发布时间】：2018-12-28 05:31:09

【问题描述】：

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

【问题讨论】：

检查你的计算属性，它可能是计算。

v-for 需要一个数组 vuejs.org/v2/guide/… 你可以计算页数然后创建一个包含数字列表的数组。

我的错，v-for 可以处理范围：vuejs.org/v2/guide/list.html#v-for-with-a-Range try v-for="number in numberOfPages" 看看它是否有效

@Sombriks 我刚刚检查过，(number, index) in numberOfPages 工作正常

我看不出有任何可以想象的方式Math.ceil(anyPositiveNumber / anyPositiveNumber) 可能永远小于 1，因此您的三元表达式完全是多余的。 Ed：除非total 是0 我想

【参考方案1】：

最有可能解决您的问题的是您的计算属性返回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

【参考方案2】：

就像其他人所说，仔细检查您的计算属性。我有两种不同的“有趣”情况（我引入的错误）​​：

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

```
myComputedProp () 
    arr.length

```

应该是return arr.length ...容易忽略:-)

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