锐客网

  1. 首页 > 睿知 > it技术 > >

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

IT知识问答vue.jsVue框架

【解决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属性，否则返回默认值。

    推荐阅读


    上一篇：解决Vue问题（[Vue warn] Avoid mutating a prop&#8230;Prop being mutated list (found in component )）

    下一篇：解决问题（Failed to load resource the server responded with a status of 404 (Not Found)）