如何在 Vuejs v-for 中迭代 GraphQL 聚合节点答案

【问题标题】：How to iterate GraphQL aggregate nodes in Vuejs v-for如何在 Vuejs v-for 中迭代 GraphQL 聚合节点
【发布时间】：2019-11-30 12:54:39
【问题描述】：

在这种情况下，如何通过 VueJS 或普通 JS 自动化迭代？

在 Vue 组件中：

ul(v-for='item in app_some')
    li {{ item.slug }}
    li {{ item.des1 }}

    //case 1: there can be from null to several nodes
    li {{ item.app_some_some_groups_aggregate.nodes[0] }}
    li {{ item.app_some_some_groups_aggregate.nodes[3] }}

    //case 2: there can be from null to thousand nodes
        li {{ item.app_des_aggregate.nodes[1] }}   
        li {{ item.app_des_aggregate.nodes[1000] }}

来自 Hasura 服务器的 POST 响应：

[ { "slug": "slugname", "des1": "descr1", "des2": "descr2", "__typename": "app_some", "app_some_some_groups_aggregate": { "nodes": [ { "app_some_group": { "slug": "slugname2", "des3": "descr3", "des4": "descr4", "__typename": "app_some_group" }, "__typename": "app_some_some_group" }, { "app_some_group": { "slug": "slugname3", "des3": "descr3", "des4": "descr4", "__typename": "app_some_group" }, "__typename": "app_some_some_group" } ], "__typename": "app_some_some_group_aggregate" }, "app_des_aggregate": { "nodes": [ { "app_some": { "slug": "slugname", "__typename": "app_some" }, "app_des_type": { "des5": "descr5", "des6": "descr6", "__typename": "app_des_type" }, "des7": "descr7", "des8": "descr8", "__typename": "app_des" }], "__typename": "app_des_aggregate" } } ]

如果有多个、100 或 1000 个节点，如何自动化迭代？

【问题讨论】：

目前尚不清楚您在寻找什么。您能否更新您的问题以描述最终输出应该是什么样的？或者也许进一步解释“自动迭代”的意思
任务通过使用 v-for 解决了两次（第一次提到，第二次在节点上）在 GraphQL 聚合查询可以是多个多层，不同层上有不同数量的节点 - 并将子组件中的数据作为最终传递输出）
也许您可以回答自己的问题并接受它，以将此问题标记为已解决

标签： javascript vue.js iterator graphql hasura

【解决方案1】：

使用 v-for 解决了两次任务：

ul(v-for='(item) in app_some')
  template(v-for='list in item.app_some_some_groups_aggregate.nodes')
    li {{list.app_some_group.slug}}
    li {{list.app_some_group.des3}}

【讨论】：