解决Vue错误：[Vue warn] Error in render RangeError Invalid array length

Vue版本：v2.*

在vue项目中使用v-for并使用属性计算computed出错：

Computed如下：

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

Template如下：

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

控制台错误输出：

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

解决办法详解

最可能出现的问题是，计算的属性返回NaN或Infinity。如果不查看所有代码，最有可能的原因是以下原因之一：

1. 将集合初始化为空对象，const result=Math.ceil(undefined / undefined)，这将返回NaN。
2. 可以正确地防止在结果到来之前计算属性，但是来自填充集合的服务器的响应的per_page为0。上面提到的计算将返回无穷大，而Vue将无法创建一个范围。

处理这个问题有多种方法，最简单的方法是，如果你可以确定per_page总是大于0，那么在循环的元素上放一个v-if。如果没有方便的元素，你可以使用<template>元素来放置它。

否则，如果要计算的数据实际上是正确的，则可以检查computed属性，否则返回默认值。