【Vue.js】v-ifの中でlengthを使うとCannot read property〜が出るときの対応！

あきぞらです。

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

これでうまく動作しました！