通过 GraphQL 查询在 Vue 中显示嵌套循环答案

【问题标题】：Display nested loop in Vue from a GraphQL query通过 GraphQL 查询在 Vue 中显示嵌套循环
【发布时间】：2020-11-17 07:07:18
【问题描述】：

我正在使用 OneGraph 从 Spotify 中提取数据。即使查看其他 Vue 代码示例，我也不知道如何渲染第三个嵌套循环。我正在尝试返回每个播放列表的艺术家姓名，如下所示。

<template>
    <ul>
        <li v-for="(item, index) in $page.oneGraph.spotify.me.playlists" :key="index">
            <ol>
                <li v-for="track in item.tracks" :key="track.playlists">
                    {{track.name}} -
                    <span v-for="artist in item.tracks.artists" :key="artist.tracks">
                        {{artist.name}}
                    </span>
                </li>
            </ol>
        </li>
    </ul>
</template>

查询：

{
  spotify {
    me {
      id
      playlists(limit: 1) {
        name
        tracks {
          name
          artists {
            name
          }
        }
      }
    }
  }
}

【问题讨论】：

我想我明白了：`
{{track.name}}