使用 Vue 从 JSON 对象中拉取除第一个以外的其他图像

Question

我正在尝试使用 Vue 在 JSON 对象中获取第二张图像 url。我可以通过指定 <img :src="item.images[0].url" /> 来获取第一个图像 src url。因此，从逻辑上讲，我认为 <img :src="item.images[1].url" /> 会得到第二个图像 (300x300) 变体。它没有。

（更新） 我刚刚意识到我需要一个 v-if 因为不是所有的播放列表都有 300x300 的图像大小。

if has images[1].url else images[0].url怎么写?

我的 for 循环：

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

这是我的查询 returns:

{
  "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
              }
            ],
…

Answer 1

根据您分享的代码，如果 <img :src="item.images[0].url" /> 有效，那么 <img :src="item.images[1].url" /> 也应该有效。

很可能发生的情况是您的 json 中的 playlists 之一只有一张图片，这会导致您的代码在您尝试访问第二张图片时出错。

要解决此问题，您可以添加如下所示的 v-if：

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

使用 Vue 从 JSON 对象中拉取除第一个以外的其他图像

Pulling other images except first from JSON object with Vue

json

graphql

vuejs2

gridsome