Ошибка Vue при рендеринге: RangeError: недопустимая длина массива

Вью: v2.*

В моем проекте vuejs я использую диапазон v-for с вычисленными

Рассчитано

computed: {
   numberOfPages() {
         const result = Math.ceil(this.collection.total / this.collection.per_page)
         return (result < 1) ? 1 : result
    }
},

шаблон

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

Консоль ошибок

1 - [Vue warn]: Error in render: "RangeError: Invalid array length"

2 - RangeError: Invalid array length


vue.js v-for
person Ahmed Mamdouh    schedule 20.07.2018    source источник
comment
Проверьте свое вычисленное свойство, это может быть расчет.   -  person Jesus Erwin Suarez    schedule 20.07.2018
comment
v-for ожидает массив vuejs.org/v2/guide/ вы можете рассчитать количество страниц, а затем создать массив, содержащий список с числами.   -  person Sombriks    schedule 20.07.2018
comment
мой плохой, v-for может обрабатывать диапазоны: vuejs. org/v2/guide/list.html#v-for-with-a-Range попробуйте v-for=number в numberOfPages и посмотрите, работает ли это   -  person Sombriks    schedule 20.07.2018
comment
@Sombriks Я только что проверил, и (number, index) in numberOfPages работает отлично   -  person Phil    schedule 20.07.2018
comment
Я не вижу никакого мыслимого способа, которым Math.ceil(anyPositiveNumber / anyPositiveNumber) может быть меньше 1, поэтому ваше троичное выражение полностью избыточно. Эд: если только total не является 0, я полагаю   -  person Phil    schedule 20.07.2018
comment
для v-for="(number,index) in numberOfPages", когда numberOfPages минус, появится над двумя ошибками. Но число страниц всегда будет положительным. Вы уверены, что ошибка возникает именно в этой строке?   -  person Sphinx    schedule 20.07.2018
comment
Спасибо, ребята, что ответили   -  person Ahmed Mamdouh    schedule 20.07.2018
comment
Я уверен в этой ошибке, но когда я меняю этот numperOfpage или возвращаю его далеко в данных, он работает нормально, но я должен открыть consloe Vue, чтобы показать эти данные. Я не знаю, в чем здесь проблема, поэтому все ваши предложения я пробовал все выше ....   -  person Ahmed Mamdouh    schedule 20.07.2018

Ответы (2)


arrow_upward
12
arrow_downward

Наиболее вероятным кандидатом на вашу проблему является то, что ваше вычисляемое свойство возвращает NaN или Infinity. Не видя всего вашего кода, наиболее вероятной причиной этого является одна из следующих:

  • Вы инициализируете collection пустым объектом. const result = Math.ceil(undefined / undefined) вернется NaN
  • Вы правильно предотвращаете вычисление свойства до получения результата, но ответ от сервера, который заполняет collection, имеет per_page из 0. Упомянутый выше расчет вернет Infinity, и Vue не сможет создать диапазон из этого.

Есть несколько способов справиться с этой проблемой. Самый простой способ, если вы можете быть уверены, что per_page всегда равно > 0, поставить v-if на элемент вокруг вашего цикла. Если подходящего элемента нет, можно использовать элемент <template>, чтобы обойти его.

В противном случае вы можете проверить в своем вычисляемом свойстве, действительно ли данные, которые вы собираетесь вычислять, верны, и в противном случае вернуть число по умолчанию.

numberOfPages() {
  if (
    !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
}
person Sumurai8    schedule 21.07.2018

arrow_upward
1
arrow_downward

Как сказал кто-то другой, тщательно проверяйте свои вычисляемые свойства. У меня было две разные «интересные» ситуации (ошибки, которые я ввел):

(1) Сначала я забыл включить ключевое слово «return» в свое вычисляемое свойство! Итак, я делал:

```
myComputedProp () {
    arr.length
}
```

что должно было быть return arr.length ... легко не заметить :-)

(2) Во-вторых, результатом моего расчета (который я использовал как длину/размер массива) было не целое число, а действительное (разбитое число). Решением было, конечно, добавить Math.round() или Math.trunc()... :-)

person leo    schedule 21.12.2018