我想用包含标签和输入的Vue.js创建一个组件。例如 ：

<label for="inputId">Label text</label>
<input id="inputId" type="text" />

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

谢谢。

每个组件都有一个唯一的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。

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

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

let uuid = 0;

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

更新： 如果._uid实例中不存在属性，则代码将引发错误，以便您可以更新它以使用Vue提供的自定义属性或新的唯一id属性。

尽管zxzak的回答很不错；_uid不是已发布的api属性。为了避免日后发生更改时的麻烦，您可以使用如下所示的插件解决方案通过一次更改来更新代码。

Vue.use({
    install: function(Vue, options) {
        Object.defineProperty(Vue.prototype, "uniqId", {
            get: function uniqId() {
                if ('_uid' in this) {
                   return this._uid;
                }
                throw new Error("_uid property does not exist");
            }
        });
    }
});

更新资料

我在npm上发布了vue-unique-id Vue插件。

回答

其他解决方案都不能满足在组件中具有多个表单元素的要求。这是我对基于先前给出的答案的插件的看法：

Vue.use((Vue) => {
  // Assign a unique id to each component
  let uuid = 0;
  Vue.mixin({
    beforeCreate: function() {
      this.uuid = uuid.toString();
      uuid += 1;
    },
  });

  // Generate a component-scoped id
  Vue.prototype.$id = function(id) {
    return "uid-" + this.uuid + "-" + id;
  };
});

这不依赖保留供内部使用的内部_uid属性。

在组件中像这样使用它：

<label :for="$id('field1')">Field 1</label>
<input :id="$id('field1')" type="text" />

<label :for="$id('field2')">Field 2</label>
<input :id="$id('field2')" type="text" />

要产生这样的东西：

<label for="uid-42-field1">Field 1</label>
<input id="uid-42-field1" type="text" />

<label for="uid-42-field2">Field 2</label>
<input id="uid-42-field2" type="text" />

npm i -S lodash.uniqueid

然后在您的代码中...

<script>
  const uniqueId = require('lodash.uniqueid')

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

这样，您无需加载整个lodash库，甚至不必将整个库保存到node_modules。

在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>

我在回复中没有看到的一种简单方法是：

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

<script>
import uniqueId from 'lodash-es/uniqueId'

export default {
  computed: {
    id () {
      # return this._uid
      return uniqueId('id')
    }
  }
}
</script>

如果您使用的是TypeScript，而没有任何插件，则只需在类组件中添加一个静态ID，然后在created（）方法中对其进行递增。每个组件将具有唯一的ID（添加字符串前缀，以避免与使用相同技巧的其他组件发生冲突）

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

<script lang="ts">
  ...
  @Component
  export default class MyComponent extends Vue {
    private id!: string;
    private static componentId = 0;
    ...
    created() {
      MyComponent.componentId += 1;
      this.id = `my-component-${MyComponent.componentId}`;
    }
 </script>

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

vue-uniq-ids

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

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

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

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

uid: Math.random()

简单而足够。

也可以使用此模式（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> 

希望能帮助到你