ネストされたJSONの値を取得できません

Nuxt.jsとSpotify APIを使用しております。
Spotify APIから以下のようなJSONデータを取得しました。

JSON
1{
2	"external_urls": {
3		"spotify": "https://open.spotify.com/artist/1AyWsgtaIgXbzjJlTx2ZDp"
4	},
5	"followers": {
6		"href": null,
7		"total": 836461
8	},
9	"genres": [
10		"j-idol",
11		"j-pop",
12		"japanese r&b"
13	],
14	"href": "https://api.spotify.com/v1/artists/1AyWsgtaIgXbzjJlTx2ZDp",
15	"id": "1AyWsgtaIgXbzjJlTx2ZDp",
16	"images": [
17		{
18			"height": 640,
19			"url": "https://i.scdn.co/image/c701ca60eb5e276acde4e401a3f41049eec43962",
20			"width": 640
21		},
22		{
23			"height": 320,
24			"url": "https://i.scdn.co/image/9c6ea60e3e67681dc5896e8c2b42f9593f4921dd",
25			"width": 320
26		},
27		{
28			"height": 160,
29			"url": "https://i.scdn.co/image/15dfc24270bc37873820f4ea14708ac6ba96134e",
30			"width": 160
31		}
32	],
33	"name": "AAA",
34	"popularity": 65,
35	"type": "artist",
36	"uri": "spotify:artist:1AyWsgtaIgXbzjJlTx2ZDp"
37}

このデータを元に画像を出力するため、urlの値を取得したいのですが上手くいきません。

以下のソースの★の箇所でTypeError: Cannot read property 'url' of undefinedのエラーが出ます。
画像URLを取得するにはどうしたらよいでしょうか？？

{{ artist }}した時に表示される内容が上記のJSONになります。

vue
1<template>
2  <div>
3    <v-text-field v-model="searchQuery" label="アーティスト名" />
4    <v-btn @click="searchArtist">Search</v-btn>
5
6    <v-card v-for="(artist, i) in artists" :key="i" class="mb-5">
7      {{ artist.images[0].url }}  // ★ここでエラーが出ます
8    </v-card>
9  </div>
10</template>
11
12<script>
13export default {
14  data() {
15    return {
16      searchQuery: '', // 検索クエリ
17      artists: [] // 検索結果のアーティスト
18    }
19  },
20  methods: {
21    searchArtist() {
22      const accessToken = '〇〇〇〇〇〇〇〇〇〇'
23      const options = {
24        method: 'GET',
25        headers: { Authorization: `Bearer ${accessToken}` },
26        url:
27          'https://api.spotify.com/v1/search?q=' +
28          this.searchQuery +
29          '&type=artist'
30      }
31
32      this.$axios(options).then((res) => {
33        this.artists = res.data.artists.items
34      })
35    }
36  }
37}
38</script>
39

行動規範の内容に同意します

回答1件

ベストアンサー

アクセス方法は合っており、画像が1枚も無いアーティストを踏んでいる可能性が高いです。

vue
1<template>
2  <div>
3    <v-text-field v-model="searchQuery" label="アーティスト名" />
4    <v-btn @click="searchArtist">Search</v-btn>
5
6    <v-card v-for="(artist, i) in artists" :key="i" class="mb-5">
7      <template v-if="artist.images[0]">
8        {{ artist.images[0].url }}
9      </template>
10      <template v-else>
11        画像無し
12      </template>
13    </v-card>
14  </div>
15</template>