Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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>
Error Console
1 - [Vue warn]: Error in render: "RangeError: Invalid array length"
2 - RangeError: Invalid array length
                v-for expects an array vuejs.org/v2/guide/… you could calculate number of pages then create an array containing a list with numbers.
– Sombriks
                Jul 20, 2018 at 0:27
                my bad, v-for can handle ranges: vuejs.org/v2/guide/list.html#v-for-with-a-Range try v-for="number in numberOfPages" and see if it works
– Sombriks
                Jul 20, 2018 at 0:35
                I don't see any conceivable way that Math.ceil(anyPositiveNumber / anyPositiveNumber) could ever be less-than 1 so your ternary expression is totally redundant. Ed: unless total is 0 I suppose
– Phil
                Jul 20, 2018 at 0:41
The most likely candidate for your problem is that your computed property returns NaN or Infinity. Without seeing all of your code, the most likely reason for that is one of the following:
You initialize collection to an empty Object. const result = Math.ceil(undefined / undefined) will return NaN
You do correctly prevent the property from being calculated before the result comes in, but the response from the server that populates collection has a per_page of 0. The calculation mentioned above would return Infinity, and Vue would not be able to create a range from that.
There are multiple ways of dealing with this problem. The easiest way is, if you can be certain that per_page is always > 0, to put a v-if on the element around your loop. If there is no convenient element, you can use the <template> element to put around it.
Otherwise you can check in your computed property if de data you are going to calculate with, is actually correct, and otherwise return a default number.
numberOfPages() {
    !this.collection ||
    Number.isNaN(parseInt(this.collection.total)) ||
    Number.isNaN(parseInt(this.collection.per_page)) ||
    this.collection.per_page <= 0
    return 0;
  const result = Math.ceil(this.collection.total / this.collection.per_page)
  return (result < 1) ? 1 : result
Like someone else said, carefully check your computed properties. I had two different "interesting" situations (bugs that I introduced):
(1) First I forgot to include the "return" keyword in my computed property!
    So I was doing:
myComputedProp () {
    arr.length
which should have been return arr.length ... easy to overlook :-)
(2) Second, the result of my calculation (which I used as an array length/size) was not an integer but a real (broken number). Solution was of course to add Math.round() or Math.trunc() ... :-)
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.