Vue.js：如何为每个组件实例设置唯一的ID？

也可以使用这种模式（Vue 2.0 v-bind）来实现，所以可以说您有一个要迭代的项目列表，并且想要给一些dom元素提供唯一的ID。

new Vue({

  el:body,
  data: {
     myElementIds : [1,2,3,4,5,6,8]
   }
})

HTML

<div v-for="id in myElementIds">
    <label v-bind:for="id">Label text for {{id}}</label>
    <input v-bind:id="id" type="text" />
<div> 

希望能帮助到你

如果您的uid不被其他工具使用，我有个主意。

uid: Math.random()

简单而足够。

对于在多个组件中的DOM中具有非唯一ID的根本问题，此软件包似乎是一个很好的解决方案：

vue-uniq-ids

使用组件是一种趋势。组件很酷，它们很小，很明显，易于使用且模块化。直到id属性。

某些HTML标签属性需要使用id属性，例如label [for]，input [form]和许多aria- *属性。id的问题在于它不是模块化的。如果页面上的多个id属性具有相同的值，则它们可能会相互影响。

VueUniqIds帮助您摆脱这个问题。它提供了一组与id相关的指令，该值通过添加唯一的字符串自动修改，同时保持属性易于阅读。

在Vue2中，使用v-bind。

说我有一个民意调查对象

  <div class="options" v-for="option in poll.body.options">
    <div class="poll-item">
      <label v-bind:for="option._id" v-bind:style="{color: option.color}">{{option.text}}</label>
      <input type="radio" v-model="picked" v-bind:value="option._id" v-bind:id="option._id">
  </div>
  </div>

就Nihat而言（以上）：Evan您建议不要使用_uid：“ vm _uid保留供内部使用，将其保持私有状态（而不是在用户代码中依赖它）很重要，这样我们就可以灵活地更改其潜在的未来用例的行为。...我建议您自己生成UID（使用模块，全局mixin等）”

在此GitHub问题中使用建议的mixin 生成UID似乎是一种更好的方法：

let uuid = 0;

export default {
  beforeCreate() {
    this.uuid = uuid.toString();
    uuid += 1;
  },
};

每个组件都有一个唯一的ID，可以通过进行访问this._uid。

<template>
  <div>
    <label :for="id">Label text for {{id}}</label>
    <input :id="id" type="text" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      id: null
    }
  }, 
  mounted () {
    this.id = this._uid
  }
}
</script>

如果您想对ID进行更多控制，可以例如在父组件中生成ID。