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

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