Блог

Я продолжаю получать эту ошибку из тега при попытке отобразить компонент, который выглядит следующим образом:

 <template>
  <div v-if="playlists" class="playlists">
      <router-link
        :to="`/playlist/${playlist.id}`"
        tag="div"
        v-for="playlist in playlists"
        :key="playlist.id"
        class="playlist"
      >
        <img :src="playlist.images[0].url" alt="bild">
        <h2>{{playlist.name.toUpperCase()}}</h2>
      </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playlists: null
    };
  },
  beforeMount: function() {
    if (this.$parent.$parent.loggedIn) {
      this.spotify.getUserPlaylists().then(data => {
        this.playlists = data.body.items;
      });
    }
  }
};
</script>
  

Все данные присутствуют, и я могу отобразить playlist.images[0] объект, но при попытке визуализации playlist.images[0].url он выдает ошибку.
Массив изображений выглядит следующим образом:

 "images": [
        {
            "height": null,
            "url": "www.example.com",
            "width": null
        }
 ]
  

Как я могу это решить?

Рендеринг <img> при playlist обновлении с помощью ответа API:

изменить

 <img :src="playlist.images[0].url" alt="bild"> 
  

Для

 <img v-if="playlist.images.length > 0" :src="playlist.images[0].url" alt="bild">