我正在使用 Vue.js 生成 div,我想使用 JSON 文件中的数据来执行此操作。
它不一定必须来自 JSON,但这会更好,我只需要为下面 html 中的每个 div 实例创建一个唯一的 id。
为每个 div 创建唯一 ID 的最佳方法是什么?
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>
Run Code Online (Sandbox Code Playgroud)
JSON
"cyclists": [
{
"name": "Jason",
"position": "CEO",
},
{
"name": "Mike",
"position": "Digital Strategist",
},
{
"name": "Tom",
"position": "Vice President, Product Management",
},
{ …Run Code Online (Sandbox Code Playgroud)