Vue.js: ¿Cómo establecer un ID único para cada instancia de componente?

Quiero crear un componente con Vue.js contiene una etiqueta y una entrada. por ejemplo :

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

¿Cómo puedo establecer un ID único para cada instancia de componente?

Gracias.

 41
vue.js
Author: PierreB, 2016-01-22
Source

5 answers

Cada componente tiene un id único al que se puede acceder 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>

Si desea más control sobre los ids, puede, por ejemplo, generarlos dentro de un componente padre.

 79
Author: zxzak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-09 15:11:03

Aunque la respuesta de zxzak es genial; _uid no es una propiedad api publicada. Para ahorrar un dolor de cabeza en caso de que cambie en el futuro, puede actualizar su código con un solo cambio con una solución de complemento como la siguiente. 

Vue.use({
    install: function(Vue, options) {
        Object.defineProperty(Vue.prototype, "uniqId", {
            get: function uniqId() {
                return this._uid;
            }
        });
    }
});
 12
Author: Nihat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-29 07:25:31

Al punto de Nihat (arriba): Evan You ha aconsejado no usar _uid: "El vm _uid está reservado para uso interno y es importante mantenerlo privado (y no confiar en él en el código de usuario) para mantener la flexibilidad de cambiar su comportamiento para posibles casos de uso futuros. ... Yo sugeriría generar UIDs usted mismo [usando un módulo, un mixin global, etc.]"

Usar el mixin sugerido en este problema de GitHub para generar el UID parece un mejor enfoque: 

let uuid = 0;

export default {
  beforeCreate() {
    this.uuid = uuid.toString();
    uuid += 1;
  },
};
 9
Author: buckthorn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-31 19:36:38

En Vue2, use v-bind.

Digamos que tengo un objeto para una encuesta

  <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>
 2
Author: 趙曉明,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-06 23:10:02

También se puede lograr usando este patrón (Vue 2.0 v-bind), así que digamos que tiene una lista de elementos para iterar y desea dar algunos id de elemento dom uninque.

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 ayude

 -3
Author: pitaside,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-02 17:07:06