我将如何使用v-for循环下面的JSON对象?我想循环所有ID / Numbers,以及每个数字中的所有项目,并将它们全部显示在列表中......我知道我可以使用_1210023轻松循环所有system_events但是如何循环所有不同的ID / Numbers,以及所有里面的物品?
我的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"
}
]
}
}
2 回答
除了Bert 's answer, I' ll之外,你还可以使用
template
标签来不渲染主框架 . 例如,如果您只想要子项目的干净HTMLul>li
,这很有用 .另一种方法是使用计算属性来简化数据结构:
这允许您在模板中使用一个简单的循环,这使得标记的结构更清晰:
如果您正在处理大型数据集,和/或数据经常发生变异,您可能希望测试这两种方法的性能 . 我不知道哪一个会更好 .
JSFiddle:https://jsfiddle.net/em33av7j/