Вытягивание других изображений, кроме первого, из объекта JSON с помощью Vue

Я пытаюсь получить второй URL-адрес изображения в объекте JSON, используя Vue. Я могу получить URL-адрес src первого изображения, указав <img :src="item.images[0].url" />. Итак, логически я подумал, что <img :src="item.images[1].url" /> получит второй вариант изображения (300x300). Это не так.

(Обновление) Я только что понял, что мне нужен v-if, потому что не все плейлисты имеют размер изображения 300x300.

Как написать, если есть images[1].url, иначе images[0].url?

Мой цикл for:

<div v-for="(item, index) in $page.oneGraph.spotify.me.playlists" :key="index">

Вот что возвращает мой запрос:

{
  "data": {
    "spotify": {
      "me": {
        "id": "me",
        "playlists": [
          {
            "id": "5EpTRIeVs55Hl1g7NY53v1",
            "name": "Euphrate",
            "images": [
              {
                "url": "https://mosaic.scdn.co/640/ab67616d0000b27320a15cbf156f65c94ef6a506ab67616d0000b27365db2b50dcd76741d9fa12a5ab67616d0000b27377d36619ec51d9f76bb1ffcfab67616d0000b2739d24c92c3d3837eb9366cb79",
                "height": 640,
                "width": 640
              },
              {
                "url": "https://mosaic.scdn.co/300/ab67616d0000b27320a15cbf156f65c94ef6a506ab67616d0000b27365db2b50dcd76741d9fa12a5ab67616d0000b27377d36619ec51d9f76bb1ffcfab67616d0000b2739d24c92c3d3837eb9366cb79",
                "height": 300,
                "width": 300
              },
              {
                "url": "https://mosaic.scdn.co/60/ab67616d0000b27320a15cbf156f65c94ef6a506ab67616d0000b27365db2b50dcd76741d9fa12a5ab67616d0000b27377d36619ec51d9f76bb1ffcfab67616d0000b2739d24c92c3d3837eb9366cb79",
                "height": 60,
                "width": 60
              }
            ],
…

json graphql vuejs2 gridsome
person scottrod    schedule 27.07.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Судя по коду, которым вы поделились, если <img :src="item.images[0].url" /> работает, то и <img :src="item.images[1].url" /> тоже должно работать.

Скорее всего, происходит то, что один из playlists в вашем json имеет только одно изображение, что приводит к ошибке вашего кода при попытке доступа ко второму изображению.

Чтобы исправить это, вы можете добавить v-if, как показано ниже:

<img :src="item.images[1].url" v-if="item.images.length > 1" />

person Shoejep    schedule 27.07.2020
comment
Да, это была ошибка, потому что одного из меньших изображений не существовало, но ошибка была недостаточно конкретной. Я придумал дилетантский способ написать это: <img v-if="item.images[1]" :src="item.images[1].url" /> <img v-else :src="item.images[0].url" />. Я хочу сказать, что если существует второе изображение, используйте его, иначе используйте первое изображение. Но, вероятно, есть более эффективный способ. - person scottrod; 27.07.2020
comment
Вы можете попробовать <img :src="(item.images[1] || item.images[0]).url" /> - person Shoejep; 28.07.2020
comment
Это еще лучше. Спасибо @shoejep - person scottrod; 28.07.2020