title: How can I generate unique id's in Vue.js from attributes in a JSON file?
body: <p>I am using Vue.js to generate divs and I would like to use data from a JSON file to do so. </p>
  
  <p>It doesn't necessarily have to be from the JSON but that would be preferable, I just need to create a unique id for each instance of the div in the html below.</p>
  
  <p>What is the best way to create unique ID's for each of the divs?</p>
  
  <p>HTML</p>
  
  <pre><code> &lt;ul&gt;
      &lt;li v-for="(member, index) in cyclists" :key="index" class="col-md-4 inview fromBottomIn" data-in="fromBottomIn" data-out="fromBottomOut"&gt;
          &lt;div class="cycling__card"&gt;
              &lt;div class="cycling__rider-container"&gt;
                  &lt;span class="cyclist__name"&gt;{{member.name}}&lt;/span&gt;
              &lt;/div&gt;
  
              &lt;!-- Need to add id's to the div below --&gt;
              &lt;div id={{member.name}}&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;                                      
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JSON</p>
  
  <pre><code>  "cyclists": [
      {
        "name": "Jason",
        "position": "CEO",
      },
      {
        "name": "Mike",
        "position": "Digital Strategist",
      },
      {
        "name": "Tom",
        "position": "Vice President, Product Management",
      },
      {
        "name": "Jeff",
        "position": "Senior Director, Creative",
      },
  }
  </code></pre>