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

Question

我正在使用 Vue.js 生成 div，我想使用 JSON 文件中的数据来生成 div。

它不一定必须来自 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>

JSON

   "cyclists": [
    {
      "name": "Jason",
      "position": "CEO",
    },
    {
      "name": "Mike",
      "position": "Digital Strategist",
    },
    {
      "name": "Tom",
      "position": "Vice President, Product Management",
    },
    {
      "name": "Jeff",
      "position": "Senior Director, Creative",
    },
}

原文由 SBT23434 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在这种情况下使用 uuid ，您需要将 json 数据合并到另一个具有新 id 的对象，因此示例：

 <script>
  import { uuid } from 'vue-uuid';

  export default {
    data() {
      return {
        uuid: uuid.v1(),
        id: null
      }
    },
    computed: {
      newCyclists: function () {
       const id = this.id;
       const newID = this.$uuid.v4();
       return {
          ...cyclists,
          id: newID,
        }
      }
    }
  };
</script>

在 computed 使用扩展运算符将新 ID 与当前 JSON 数据合并为新 ID， vue-uuid 来自 uuid 库，v4 与生成 ID 相关

原文由 Moumen Soliman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

有不同的方法。

1. 使用索引。您有一个数组，因此只需使用它们来自的索引，并在前面加上对象独有的内容。 cyclist_1, cyclist_2…
2. 将 id 作为数据的一部分放在 JSON 上。
3. 从您拥有的数据中得出它。使用哈希，或简单地连接名称 + 位置。使用一些功能来清理它（删除空格、无效的 html 字符等）
4. 为每个动态生成一个 uuid。您可以使用 社区开发的 uuid 版本 4 的这个惊人功能尽可能短：

    function b(a){return a?(a^Math.random()*16>>a/4).toString(16):([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,b)}

原文由 jorbuedo 发布，翻译遵循 CC BY-SA 4.0 许可协议