Question

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

JSON

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

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与具有新ID的当前JSON数据合并，vue-uuid来自uuid库，而v4与生成ID有关

Answer 2

如果您不想加载诸如vue-uuid之类的附加模块，则可以在假定每个名称/位置都是唯一的前提下，使用此函数生成对每个数组对象进行字符串化的结果的哈希值。

我以this Stackoverflow answer为基础。

const data = [{"name":"Jason","position":"CEO"},{"name":"Mike","position":"Digital Strategist"},{"name":"Tom","position":"Vice President, Product Management"},{"name":"Jeff","position":"Senior Director, Creative"}];

function genHash(str) {
  var hash = 0, i, chr;
  if (str.length === 0) return hash;
  for (i = 0; i < str.length; i++) {
    chr   = str.charCodeAt(i);
    hash  = ((hash << 5) - hash) + chr;
    hash |= 0;
  }
  return hash;
};

// For each object in the array create
// a stringyfied version of it and create
// a hash
data.forEach(obj => {
  obj.id = genHash(JSON.stringify(obj));
});

console.log(data);

然后，您可以像往常一样遍历数据。

Answer 3

有不同的方法。

使用索引。您有一个数组，因此只需使用它们来自的索引，并以该对象特有的前缀即可。 cyclist_1，cyclist_2 ...
将IDs作为数据的一部分放在JSON上。
从您拥有的数据中得出。使用散列，或简单地将名称+位置连接在一起。使用一些功能对其进行清理（删除空格，无效的html字符等）
为每个用户动态生成一个uuid。您可以在uuid版本4 developed by the community中使用此惊人的功能，以使其尽可能最短：
```
function b(a){return a?(a^Math.random()*16>>a/4).toString(16):([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,b)}
```

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

3 个答案: