title: Vue JS access object by dynamic key within object
body: <p>I've got a <code>v-for</code> loop in Vue JS 2.x that loops over an Array of objects, each object in the array has a &quot;key&quot;, 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 <code>v-for</code> loop, here's what my data looks like in my array...</p>
  <pre><code>[{
    &quot;6457&quot;: {
      &quot;agent&quot;: {
        &quot;id&quot;: 4003,
        &quot;memFree&quot;: 0
      }
    }
  }, {
    &quot;7809&quot;: {
      &quot;agent&quot;: {
        &quot;id&quot;: 7809,
        &quot;memFree&quot;: 20
      }
    }
  }]
  </code></pre>
  <p>I was hoping I could just access the key by using <code>[0]</code>, but that doesn't seem to return anything in this case.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div v-for=&quot;(server, index) in servers&quot; :key=&quot;index&quot;&gt;
    &lt;!-- gives me a single object by key --&gt;
    {{ server }}
  
    &lt;!-- doesn't work --&gt;
    {{ server.memFree }}
  
    &lt;!-- doesn't work --&gt;
    {{ server[0].memFree }}
  &lt;/div&gt;
  </code></pre>
  <p>What am I missing here?</p>