时间戳

首页 > 解决方案 > 按结果迭代分组

vue.js - 按结果迭代分组

问题描述

我必须遍历组和组内部，我需要为每个组单独进行迭代。

这是我得到的回应：

{
    "message": "",
    "status": "success",
    "response": {
        "Te dhenat e Klientit": [
            {
                "id": 1,
                "specification": "Personal Accidents",
                "header": "Te dhenat e Klientit",
                "item": "Veprimtaria",
                "type": "text"
            },
            {
                "id": 2,
                "specification": "Personal Accidents",
                "header": "Te dhenat e Klientit",
                "item": "Numri i Siguruarve",
                "type": "text"
            },
            {
                "id": 3,
                "specification": "Personal Accidents",
                "header": "Te dhenat e Klientit",
                "item": "Mosha Mesatare",
                "type": "text"
            },
            {
                "id": 4,
                "specification": "Personal Accidents",
                "header": "Te dhenat e Klientit",
                "item": "Tjere",
                "type": "text"
            }
        ],
        "Shuma e Sigurimit": [
            {
                "id": 5,
                "specification": "Personal Accidents",
                "header": "Shuma e Sigurimit",
                "item": "Objekti i Sigurimit",
                "type": "list"
            }
        ],
        "Mbulimet e Kerkuara": [
            {
                "id": 6,
                "specification": "Personal Accidents",
                "header": "Mbulimet e Kerkuara",
                "item": "Mbulimi",
                "type": "list"
            }
        ],
        "Shenime": [
            {
                "id": 7,
                "specification": "Personal Accidents",
                "header": "Shenime",
                "item": "Shenime",
                "type": "text"
            }
        ],
        "Primi total per Person": [
            {
                "id": 8,
                "specification": "Personal Accidents",
                "header": "Primi total per Person",
                "item": "Primi Neto",
                "type": "text"
            },
            {
                "id": 9,
                "specification": "Personal Accidents",
                "header": "Primi total per Person",
                "item": "TVSH(18%)",
                "type": "text"
            },
            {
                "id": 10,
                "specification": "Personal Accidents",
                "header": "Primi total per Person",
                "item": "Primi Total",
                "type": "text"
            }
        ]
    }
}

所以你可以看到有几个组，每个组里面都有项目，我需要获取组名并显示它，然后迭代每个组中的项目以使用该数据。

标签： vue.js

解决方案

data() {
    return {
        response: {},
    }
},
methods: {
    fetch() {
        axios.get('DATA_URL').then(({response}) => {
            // here is json response of GET request. Assign it to this.response
            this.response = response.data
        })
    }
}


<div v-for="(items, title) in response" :key="title">
    <b>{{ title }}</b>
    <div v-for="item in items" :key="item.id">
        {{ item.item }}
    </div>
</div>

推荐阅读