今天写项目的时候,报错出了这样的错误

 RangeError: Invalid array length 

在网络上找了一些资料发现,是v-for语句出现了问题。然后在检查时发现是提供的数据不为整数所导致的。

<div  v-for="itemx in (hostProduct.length/4)" :key="itemx">

因为hostProduct.length/4不一定会被整除,所以会有余数产生的情况,只要把结果取整就可以了。还有提供的数据不为0也会报同样的错误。

<div  v-for="itemx in parseInt(hostProduct.length/4)" :key="itemx" >

1、 可以用 v-for 指令基于一个数组来渲染一个列表

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }

2、可以用 v-for 来遍历一个对象的属性

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'

3、可以使用一个方法在嵌套 v-for 循环中

<li v-for="n in evenNumbers">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>
data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0

4、v-for也可以接受整数

<span v-for="n in 10">{{ n }} </span>

参考文章:列表渲染Uncaught RangeError: Invalid array length 问题解决​​​​​​​Errors: Invalid array length​​​​​​​​​​​​​​

编程语言中的数字很有意义,因为我们将其表示为抽象的数学数字。 JavaScript有两种表示数字的数据类型,即JS数字(IEEE 64位浮点数)和bigints (任意精度整数)。 并非所有的表述数学数字都可以由这些数据类型表示,并且并非这些数据类型之一的所有值都可以表示数学数字(JS数字类型的NaN , Infinity和-Infinity )。 因为JavaScript使用“数字”来引用其浮点数据类型,所以当我们要说的是“数学数字”时,我们总是会说“数学数字”。 该软件包与数学自然数(非负整数)有关。 只要有足够的内存,所有这些都可以安全地表示为bigints。 给定特定的安全性概念,其中一些可以表示为JS编号,较小的集合可以安全地表示为JS编号。 有关浮点的可跳过详细信息: JavaScript表达式2**70计算得出的JS数字正好代表您期望的数学数字。 但是,Java 在开发的时候遇到 Java.lang.IndexOutofBoundsException:Invaild array range:0 to 0 的报错,本文主要介绍了问题出现的原因以及解决办法。 当你使用构造函数来创建一个数组的时候,你可能想使用字面值的形式,第一个参数会被解释为数组的长度。如下: [this.enthusiasm + 1].join("!"); //正确 Array 今天在js里面写了个翻转括号字符串的算法,发现出现了FATAL ERROR: invalid array length Allocation failed - JavaScript heap out of memory错误,后来发现是自己while循环 没有终止条件,导致了内存泄漏。 此外,还需注意循环时不要让条件动态改变。 微信小程序内数组重新修改长度,使用setData竟然存在问题:会出现不能及时更新数据的情况,尝试了一下使用data强制更新数据后,再数据需要赋值的地方再用setData进行数据处理即可,能用但是不知道是否是最佳方案。参考示例 setarrayData(data){ let array = this.data.list; //这里需要更新长度的话强制更新 array.length == 0 && (this.data.list = new Array(+data.num)); //拷贝数据 let copyArray = [...this.data.pictureList]; //数组数据处 问题报错: Invalid array length 原因数组长度为负数 team_total 和 sub_total 是有接口获取的数据, 在接口数据返回前渲染的时候, 两个数据还没有获取到, 去计算: 减去数组的长度, 使数组长度前加了负号, 数组长度为负数会报错。 下图: 对数组长度做判断是错的, 我们应该对 接口返回的数据 total做判断 解决办法: 对数组长度做判断是错的, 我们应该对 接口返回的数据 total做判断 ceisum 使用demo、方法或components总结 使用cesium+react+ts编写的cesium使用。 启动项目 :alien_monster::alien_monster::alien_monster: yarn安装依赖 yarn start启动项目 加载3dtiles 调整3dtiles高度 自动调整3dtiles贴合地面 加载kml 加载kml正射底图 点/线段/体积测量 自定义路线巡游 指令机器人(接收位置、姿态消息) 建筑单体化1 建筑单体化2 自定义材质 电子围栏1 电子围栏2 视频融合编辑工具 instances gltf并更新位置 更新单个geometryinstance属性 点线面与鼠标交互 地球自旋转 自定义几何体 各种常用pick 3dtiles 裁剪 屏幕色调调整 清除星空/默认图层 qq群 334522247 使用Vue的v-for的时候出现了错误 Uncaught RangeError: Invalid array length问题出在v-for的的数据上,由于提供的数据小于0所致。<tr v-for="n in emptyCount"></tr>在这里我计算了空的tr的数量,将数量控制在12条数据。this.emptyCount = 12 - projectList.length然而我忽略了一个问题