v-for 到 JSON 复合体

Question

你知道我如何使用 VUE 处理下一个 JSON 吗？我不明白该怎么做，因为它有 von V-FOR 无法访问的密钥：

\n\n

[\n    {\n        "Lavander\xc3\xada": {\n            "id": 1,\n            "name": "Lavander\xc3\xada",\n            "img": "rinse.png",\n            "Servicios": [\n                {"model":"Sentra", "doors":4},\n                {"model":"Maxima", "doors":4},\n                {"model":"Skyline", "doors":2}\n            ]\n        },\n        "Tintorer\xc3\xada": {\n            "id": 2,\n            "name": "Tintorer\xc3\xada",\n            "img": "shirt-2.png",\n            "Servicios": [\n                {"model":"Sentra", "doors":4},\n                {"model":"Maxima", "doors":4},\n                {"model":"Skyline", "doors":2}\n            ]\n        },\n        "Planchado": {\n            "id": 3,\n            "name": "Planchado",\n            "img": "iron.png",\n            "Servicios": [\n                {"model":"Sentra", "doors":4},\n                {"model":"Maxima", "doors":4},\n                {"model":"Skyline", "doors":2}\n            ]\n        },\n          "Otros": {\n            "id": 4,\n            "name": "Otros",\n            "img": "wring.png",\n            "Servicios": [\n                {"model":"Sentra", "doors":4},\n                {"model":"Maxima", "doors":4},\n                {"model":"Skyline", "doors":2}\n            ]\n        }\n    }\n]\n

\n\n

我需要访问第一部分中每个的 ID 和图像，以便稍后能够访问“服务”。

\n\n

我是这样处理V-FOR的：

\n\n

v-for="item in services" :key="item.id"\n

\n\n

但我什至无法访问每个ID。\n我用这种方式制作了一个console.log，我看到了数据，但我不明白如何使用VUE：console.log(this.services[0].Lavander\xc3\xada.id);

\n

Answer 1

您还可以迭代一个对象：

<ul v-for="(service, index) in services" :key="index">
  <li v-for="(item, key) in service" :key="key">{{key}}: {{item}}</li>
</ul>

JsFiddle

如果数组中只有一个对象，请直接使用 services[0] 而不是第一个 v-for。