How can you implement rendering based on the data that comes from the backend?

Question

Vue.js

My project is an interface for setting ip addresses, I wanted this interface to be flexible and be able to draw settings based on those eth and wlan that are on the device, i.e. for example, if the device has only 2 interfaces eth0.1 and wlan0, then only 2 settings fields for these interfaces were displayed on the settings page, json comes from the back with all the necessary information about the presence of interfaces and default settings for them. How can I process this data in vue and, based on the number of objects in the list of this json, draw the required number of input tags, for example?

Here is an example of such json coming from the back:

[{
    "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
        }
    }

}
]

Answer 1

v-for