I am using Vue.js to generate divs and I would like to use data from a JSON file to do so.

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.

What is the best way to create unique ID's for each of the divs?

HTML

 <ul>

    <li v-for=(member, index) in cyclists :key=index class=col-md-4 inview fromBottomIn data-in=fromBottomIn data-out=fromBottomOut>

        <div class=cycling__card>

            <div class=cycling__rider-container>

                <span class=cyclist__name>{{member.name}}</span>

            </div>



            <!-- Need to add id's to the div below -->

            <div id={{member.name}}>

            </div>



        </div>                                      

    </li>

</ul>

JSON

  cyclists: [

    {

      name: Jason,

      position: CEO,

    },

    {

      name: Mike,

      position: Digital Strategist,

    },

    {

      name: Tom,

      position: Vice President, Product Management,

    },

    {

      name: Jeff,

      position: Senior Director, Creative,

    },

}