VUE で未定義のエラーのプロパティ 'length' を読み取ることができません。

**

Cannot read property 'length' of undefined というエラーが報告された場合の対処法

**

プロジェクトを行う際に、エラーの長さが報告されます。

あるプロジェクトで作業中に長さのエラーに遭遇しました。でも、他に何の影響もなく、ただただ赤い浮き輪を見ているのが辛いです。

<イグ

調べてみると、出現の理由も判明
理由は、バックエンドがいくら高速でもデータを返すのに時間がかかるからですが、初期化されるときに空の配列が与えられるわけではありません。配列の形式であることに注意してください。つまり、呼び出すときに <マーク .長さ

解決方法

を追加することが可能です。 <マーク v-if
そのため、データが返されないときはレンダリングされず、データが返されたときだけレンダリングされるようにします。
これにより、エラーの報告に関する問題が解決されます

コードは以下の通りです。 Code snippet .

<div class="main" v-if="book.items">
 <div class="img-list" 
   v-for="list in book.items.length > 5? book.items.slice(1, 4): book.items "
   v-bind:key="list.id">
   <div class="new-img">
     <img :src="imageUrl(list)" alt="">
     <h1 class="title">{{list.title}}</h1>
   </div>
 </div>

そして、これで解決です

レンダリングでエラーが出たときは、実はレンダリングに問題があるのだということを、親切にも教えてくれているのです
<イグ

上記はあくまで私の個人的な理解と解決策であり、間違いがあれば、私はフロントエンドの道でさらにさらに行こうとしているフロントエンドの白であることを指摘するために歓迎する これは私の最初のブログです。