title: Vue v-for how to use variable to acces JSON
body: <p>I have this piece of html:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="home-cards flex-cards" &gt;
              &lt;div class="card border-info" style="width: 18rem;" v-for="name in equipment.data"&gt;
                  &lt;div class="card-body"&gt;
                      &lt;h5 class="card-title text-info"&gt;{{name}}&lt;/h5&gt;
                      &lt;p class="card-text"&gt;{{equipment.name}}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And in my js file I have data stored as following:</p>
  <pre><code>      equipment:{
                  data:[],
                  paralel_bar: 'blabla',
                  paralletes: 'blabla',
                  rings: 'blabla',
                  bar: 'blabla',
                  bar2: 'blabla',
                  weight: 'blabla',
                  resistance_band: 'blabla',
              },
  </code></pre>
  <p>I fill equipment.data in an ajax call with strings like &quot;rings&quot;, &quot;paralletes&quot;, &quot;bar&quot;.... randomly
  As you can guess, the strings recieved on v-for=&quot;name in equipment.data&quot; are the same objects I have stored on JS.</p>
  <p>I want to use this 'name' to get the value of this objects like: {{equipment.name}}.
  So if name == rings, when I do {{equipment.name}} it should acces equipment.rings and get the data stored there, but it does'nt work</p>
  <p>Any tip on how could I achieve it?</p>
  <p>BTW I'm using vue as cdn added on html</p>