Quero criar um componente com Vue.js contendo um rótulo e uma entrada. por exemplo :

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

Como posso definir um ID exclusivo para cada instância do componente?

Obrigado.

Cada componente possui um id único que pode ser acessado como 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>

Se você quiser mais controle sobre os ids, você pode, por exemplo, gerá-los dentro de um componente pai.

Para o ponto de Nihat (acima): Evan você desaconselhou o uso de _uid: "O vm _uid é reservado para uso interno e é importante mantê-lo privado (e não depender dele no código do usuário) para que possamos manter a flexibilidade de alterá-lo comportamento para possíveis casos de uso futuros. ... Eu sugeriria gerar UIDs você mesmo [usando um módulo, um mixin global, etc.] "

Usar o mixin sugerido neste problema do GitHub para gerar o UID parece uma abordagem melhor:

let uuid = 0;

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

Atualizar: o código gerará um erro se a ._uidpropriedade não existir na instância para que você possa atualizá-lo para usar algo personalizado ou uma nova propriedade de id exclusiva, se fornecida pela Vue.

Embora a resposta de zxzak seja ótima; _uidnão é uma propriedade api publicada. Para evitar uma dor de cabeça caso mude no futuro, você pode atualizar seu código com apenas uma alteração com uma solução de plugin como abaixo.

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");
            }
        });
    }
});

Atualizar

Eu publiquei o vue-unique-id Vue plugin para isso em npm .

Responda

Nenhuma das outras soluções aborda o requisito de ter mais de um elemento de formulário em seu componente. Esta é minha opinião sobre um plugin que se baseia em respostas dadas anteriormente:

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;
  };
});

Isso não depende da _uidpropriedade interna que é reservada para uso interno .

Use-o assim em seu componente:

<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" />

Para produzir algo assim:

<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

Então em seu código ...

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

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

Desta forma, você não está carregando a biblioteca inteira lodash, ou mesmo salvar a biblioteca inteira para node_modules.

No Vue2, use v-bind.

Digamos que tenho um objeto para uma votação

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

Uma abordagem simples que não vi nas respostas é:

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

Se você estiver usando o TypeScript, sem nenhum plug-in, você pode simplesmente adicionar um id estático em seu componente de classe e incrementá-lo no método created (). Cada componente terá um id único (adicione um prefixo de string para evitar colisão com outros componentes que usam a mesma dica)

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

Este pacote parece ser uma boa solução para o problema subjacente de ter IDs não exclusivos em seu DOM em vários componentes:

vue-uniq-ids

É uma tendência usar componentes. Os componentes são legais, são pequenos, óbvios, fáceis de usar e modulares. Até que se trata da propriedade id.

Alguns atributos de tag HTML requerem o uso de uma propriedade id, como label [for], input [form] e muitos atributos aria- *. E o problema com o id é que ele não é modular. Se várias propriedades de id na página tiverem o mesmo valor, elas podem afetar umas às outras.

O VueUniqIds ajuda você a se livrar desse problema. Ele fornece o conjunto de diretivas relacionadas ao id, cujo valor é modificado automaticamente pela adição de uma string única, mantendo o atributo fácil de ler.

Se o seu uid não for usado por outro componente, tenho uma ideia.

uid: Math.random()

Simples e suficiente.

Ele também pode ser alcançado usando este padrão (Vue 2.0 v-bind), então digamos que você tenha uma lista de itens para iterar e queira fornecer alguns ids exclusivos de elementos dom.

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> 

Espero que ajude