v-ifでdataがあるときの表示・非表示

Question

Nuxt + microcmsでJAMstackサイトを作成中です。

ブログ記事一覧などでサムネイルがあれば表示、なければデフォルトの画像を表示といった実装をおこなう際にうまくいきません。

airticle(v-for='(item, index) in items' :key="item.id")
  nuxt-link(:to='`/info/${item.id}`')
    v-card
      div.d-flex.flex-no-wrap.justify-space-between
        div
          v-card-title(v-text="item.title")
          v-card-subtitle(v-html="item.post.slice(0, 200)")
        div(v-if="item.eyecatch.url")
          img(:src="item.eyecatch.url")
        div(v-else)
          img(src="default.png")

<script>
import axios from 'axios'

export default {
  async asyncData ({ params }) {
    const page = params.p || '1'
    const limit = 4
    const { data } = await axios.get(
      `https://hogehoge.microcms.io/api/v1/info?limit=${limit}&offset=${(page - 1) * limit}`,
      {
        headers: { 'X-API-KEY': process.env.API_KEY }
      }
    )
    return {
      items: data.contents
    }
  },

  data () {
    return {
      items: []
    }
  }
}
</script>

エラーにこのようなものがでてきてしまいます。

Cannot read property 'url' of undefined

dataに画像があるときは表示。無いときはデフォルトの表示といった記述はどのように書いたらよいでしょうか？

Answer 1

コード拝見させていただきました。

Cannot read property 'url' of undefined

こちらですが、「item.eyecatch」がundefinedなので、「item.eyecatch.url」が参照できないというエラーになります。
ですので、「item.eyecatch」がundefinedになる場合を考慮する必要があります。

例えば、下記のようなコードはいかがでしょうか。お試しください。

div(v-if="item.eyecatch && item.eyecatch.url")
  img(:src="item.eyecatch.url")
div(v-else)
  img(src="default.png")

Comments

[ttkun]

できました！