RangeError: Invalid array length 问题解决

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

 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 }}
  </li>
</ul>

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 }}
  </li>
</ul>

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

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也可以接受整数

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

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