あきぞらです。
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">
これでうまく動作しました!