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

Question

在这种情况下，如何通过 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 个节点，如何自动化迭代？

Answer 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}}