Within my Vue JS 2.x project, I am utilizing a v-for loop to iterate over an array of objects. Each object in the array contains a dynamically named "key", which is unique to each object. My goal is to access the data associated with each key in order to display information within the v-for loop. Here is a snippet of my array data structure...
[{
"6457": {
"agent": {
"id": 4003,
"memFree": 0
}
}
}, {
"7809": {
"agent": {
"id": 7809,
"memFree": 20
}
}
}]
I attempted to access the key using [0], but unfortunately, that did not yield any results in this scenario.
<div v-for="(server, index) in servers" :key="index">
<!-- Outputs a single object based on the key -->
{{ server }}
<!-- Does not output the desired result -->
{{ server.memFree }}
<!-- Also does not output the desired result -->
{{ server[0].memFree }}
</div>
I am puzzled by what I might be overlooking in this setup. Any guidance would be greatly appreciated.