web-dev-qa-db-ja.com

Vueレンダリングのエラー：「RangeError：無効な配列の長さ」

Vue：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.jsv-for
7
Ahmed Mamdouh

問題の可能性が最も高いのは、計算されたプロパティが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
}
7
Sumurai8

他の誰かが言ったように、計算されたプロパティを注意深くチェックしてください。私は2つの異なる「興味深い」状況がありました（私が紹介したバグ）：

（1）最初に、計算されたプロパティに「return」キーワードを含めるのを忘れました！だから私はやっていた：

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

_return arr.length_である必要があります...見落としがちです:-)

（2）次に、私の計算結果（配列の長さ/サイズとして使用したもの）は整数ではなく実数（壊れた数）でした。もちろん、解決策はMath.round()またはMath.trunc() ... :-)を追加することでした。

1
leo