Question

版本：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-{{1}}

Answer 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
}

Answer 2

与其他人一样，请仔细检查您的计算属性。我有两种不同的“有趣”情况（我引入的错误）：

（1）首先，我忘记在我的计算属性中包括“ return”关键字！所以我在做：

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

应该是return arr.length ... ...容易被忽视：-）

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

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

2 个答案: