javascript - v-for 转 JSON 复合体

Question

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

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

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

我正在以这种方式处理 V-FOR：

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

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

标签： javascriptvue.jsv-for

Answer 1

您还可以迭代一个对象：

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

提琴手

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