相关疑难解决方法(0)

如何从 JSON 文件中的属性在 Vue.js 中生成唯一 ID?

我正在使用 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)

javascript json vue.js vue-component

5
推荐指数
2
解决办法
1万
查看次数

标签 统计

javascript ×1

json ×1

vue-component ×1

vue.js ×1