Vue JS access object by dynamic key within object

Question

I've got a v-for loop in Vue JS 2.x that loops over an Array of objects, each object in the array has a "key", basically like a name, but it's dynamic, and isn't going to be consistent. I'm trying to access the data associated with that key so that I can display information from my v-for loop, here's what my data looks like in my array...

[{
  "6457": {
    "agent": {
      "id": 4003,
      "memFree": 0
    }
  }
}, {
  "7809": {
    "agent": {
      "id": 7809,
      "memFree": 20
    }
  }
}]

I was hoping I could just access the key by using [0], but that doesn't seem to return anything in this case.

<div v-for="(server, index) in servers" :key="index">
  <!-- gives me a single object by key -->
  {{ server }}

  <!-- doesn't work -->
  {{ server.memFree }}

  <!-- doesn't work -->
  {{ server[0].memFree }}
</div>

What am I missing here?

Mocuishle · Accepted Answer · 2021-02-03 11:25:40Z

2

<div v-for="(server, index) in servers" :key="index">
  {{ Object.values(server)[0].agent.memFree }}
</div>

edited Feb 3, 2021 at 11:25

answered Feb 3, 2021 at 11:22

Mocuishle

1742 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boussadjra Brahim · Accepted Answer · 2021-02-03 11:02:48Z

1

Modify your template to be

<div v-for="(server, index) in servers" :key="index">
  <div v-for="(agentData, property) in server" :key="property">
    {{ agentData.agent.memFree }}
  </div>
</div>

edited Feb 3, 2021 at 11:02

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

answered Feb 3, 2021 at 10:58

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

Vue JS access object by dynamic key within object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related