あきぞらです。
Vue.js
で開発をしていて、v-ifディレクティブ
の書き方で少しつまったところがあったので、
対応方法を書いていきます。
配列の要素が存在するかどうかをv-ifで条件分岐をする
v-ifディレクティブ
を使って、
「配列の要素が存在するかどうか」で条件分岐をしたくて以下のような実装をしていました。
<!-- v-ifでbookListに要素があるかどうかをチェック --> <div v-if="bookList.length"> <div v-for="book in bookList" :key="book.id" class="row border-bottom"> <div class="col-sm-6 p-3 text-center"> <nuxt-link :to="`/book/${book.id}`"> <img :src="book.img_url" /> </nuxt-link> </div> <div class="col-sm-6 d-block"> <div class="py-5"> {{ book.book_name }} </div> </div> </div> </div>
これで問題ないかと思いきや、以下のようなエラーが発生してしまいました。
「ちゃんと配列につかっているのになぜ…。」
と思いつつも、エラーの原因を調べていきます。
配列の要素数を取得するところでエラーになっているのは明白なので、
重点的に確認していきます。
Cannot read property 'length' of undefined の対処方法
v-ifディレクティブ
の条件の中に、以下のように条件を修正しました。
<!-- ” bookList && ”を追加 --> <div v-if="bookList && bookList.length">
これでうまく動作しました!