Как можно реализовать отрисовку исходя из тех данных которые приходят с backend?

Question

DemonDED @DemonDED

Vue.js

Как можно реализовать отрисовку исходя из тех данных которые приходят с backend?

Мой проект представляет из себя интерфейс для настройки ip адресов, я хотел чтобы этот интерфейс был гибким и мог отрисовывать настройки исходя из тех eth и wlan которые имеются на устройстве, т.е. например если на устройстве имеются только 2 интерфейса eth0.1 и wlan0 то на странице настроек отрисовывалось только 2 поля настроек для этих интерфейсов, с бэка приходит json со всей необходимой информацией о наличии интерфейсов и установленных по-умолчанию настроек для них. Как во vue я могу обработать эти данные и исходя из количества объектов в списке этого json отрисовать необходимое количество input тегов например?

Вот пример такого json приходящего с бэка:

[{
    "ifindex": 1,
    "ifname": "lo",
    "flags": ["LOOPBACK","UP","LOWER_UP"],
    "mtu": 65536,
    "qdisc": "noqueue",
    "operstate": "UNKNOWN",
    "group": "default",
    "txqlen": 1000,
    "addr_info": [{
            "family": "inet",
            "local": "127.0.0.1",
            "prefixlen": 8,
            "scope": "host",
            "label": "lo",
            "valid_life_time": 4294967295,
            "preferred_life_time": 4294967295
        }],
    "stats64": {
        "rx": {
            "bytes": 13705129574,
            "packets": 51441935,
            "errors": 0,
            "dropped": 0,
            "over_errors": 0,
            "multicast": 0
        },
        "tx": {
            "bytes": 13705129574,
            "packets": 51441935,
            "errors": 0,
            "dropped": 0,
            "carrier_errors": 0,
            "collisions": 0
        }
    }

},{
    "ifindex": 2,
    "ifname": "ens160",
    "flags": ["BROADCAST","MULTICAST","UP","LOWER_UP"],
    "mtu": 1500,
    "qdisc": "fq_codel",
    "operstate": "UP",
    "group": "default",
    "txqlen": 1000,
    "addr_info": [{
            "family": "inet",
            "local": "10.87.1.23",
            "prefixlen": 24,
            "broadcast": "10.87.1.255",
            "scope": "global",
            "label": "ens160",
            "valid_life_time": 4294967295,
            "preferred_life_time": 4294967295
        },{
            "family": "inet",
            "local": "10.87.50.200",
            "prefixlen": 24,
            "scope": "global",
            "label": "ens160:0",
            "valid_life_time": 4294967295,
            "preferred_life_time": 4294967295
        }],
    "stats64": {
        "rx": {
            "bytes": 10791874410,
            "packets": 102006118,
            "errors": 0,
            "dropped": 2223178,
            "over_errors": 0,
            "multicast": 3123508
        },
        "tx": {
            "bytes": 1685186852,
            "packets": 18094650,
            "errors": 0,
            "dropped": 0,
            "carrier_errors": 0,
            "collisions": 0
        }
    }

}
]