vue.js - vue 中的嵌套数组循环？

Question

我如何使用 v-for 循环一个像下面这样的 JSON 对象？ 我想循环所有 ID/数字以及每个数字内的所有项目，并将其全部显示在列表中... 我知道我可以使用 v-for="item in system_events" 轻松循环所有 system_events 但是我如何循环所有不同的 ID/数字以及其中的所有项目？

我的 JSON 看起来像:

{
    "system_events": {
        "1013": [{
                "id": 25899,
                "timestamp": "2017-08-15T21:26:42Z",
                "type": "alarm",
                "code": 190,
                "title": "",
                "description": "",
                "appeared": "2017-08-15T21:26:40Z",
                "disappeared": null,
                "acknowlegded": null,
                "solved": null,
                "system_name": "Randers pr 44b sidste station"
            }, {
                "id": 26157,
                "timestamp": "2017-08-15T21:32:17Z",
                "type": "alarm",
                "code": 190,
                "title": "",
                "description": "",
                "appeared": "2017-08-15T21:32:06Z",
                "disappeared": null,
                "acknowlegded": null,
                "solved": null,
                "system_name": "Randers pr 44b sidste station"
            }
        ],
        "1015": [{
                "id": 23777,
                "timestamp": "2017-08-15T20:38:08Z",
                "type": "alarm",
                "code": 191,
                "title": "",
                "description": "",
                "appeared": "2017-08-15T20:38:00Z",
                "disappeared": null,
                "acknowlegded": null,
                "solved": null,
                "system_name": "Favrskov Svenstrup gyvelvej"
            }, {
                "id": 23779,
                "timestamp": "2017-08-15T20:38:08Z",
                "type": "alarm",
                "code": 190,
                "title": "",
                "description": "",
                "appeared": "2017-08-15T20:37:58Z",
                "disappeared": null,
                "acknowlegded": null,
                "solved": null,
                "system_name": "Favrskov Svenstrup gyvelvej"
            }
        ]
    }
}

Answer 1

除了 Bert 的回答之外，我会说您可以使用 template 标签以避免渲染主框架。例如，如果您只想为子项目提供干净的 HTML ul>li，这非常有用。

const vue = new Vue({
  el: "#app",
  data: {
    system_events: {"1013":[{"id":25899},{"id":26157}],"1015":[{"id":23777},{"id":23779}]}
  }
});

<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0472716144362a362a32" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.js"></script>

<div id="app">
  <ul>
    <template v-for="item in system_events">
      <li v-for="event in item">{{ event.id }}</li>
    </template>
  </ul>
</div>