个性化阅读
专注于IT技术分析

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

赞(0) 打赏
未经允许不得转载:srcmini » 解决Vue错误:[Vue warn] Error in render RangeError Invalid array length
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏