Quiero crear un componente con Vue.js que contenga 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.

Cada componente tiene una identificación única a la 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 identificadores, puede, por ejemplo, generarlos dentro de un componente principal.

Al punto de Nihat (arriba): Evan You ha desaconsejado el uso de _uid: "El vm _uid está reservado para uso interno y es importante mantenerlo en privado (y no confiar en él en el código de usuario) para que podamos mantener la flexibilidad de cambiar su comportamiento para posibles casos de uso futuros ... Sugeriría generar UID 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;
  },
};

Actualización: el código arrojará un error si la ._uidpropiedad no existe en la instancia para que pueda actualizarla para usar algo personalizado o una nueva propiedad de identificación única si la proporciona Vue.

Aunque la respuesta de zxzak es genial; _uidno 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() {
                if ('_uid' in this) {
                   return this._uid;
                }
                throw new Error("_uid property does not exist");
            }
        });
    }
});

Actualizar

Publiqué el vue-única-id Vue Plugin para esto en la NGP .

Responder

Ninguna de las otras soluciones aborda el requisito de tener más de un elemento de formulario en su componente. Aquí está mi opinión sobre un complemento que se basa en respuestas 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;
  };
});

Esto no depende de la _uidpropiedad interna que está reservada para uso interno .

Úselo así en su 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 producir algo como esto:

<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

Luego, en tu código ...

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

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

De esta manera, no cargará toda la biblioteca lodash, ni siquiera guardará toda la biblioteca en node_modules.

En Vue2, use v-bind.

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

Un enfoque simple que no he visto en las respuestas es:

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

Si está utilizando TypeScript, sin ningún complemento, simplemente puede agregar una identificación estática en su componente de clase e incrementarla en el método created (). Cada componente tendrá una identificación única (agregue un prefijo de cadena para evitar la colisión con otros componentes que usan la misma punta)

<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 paquete parece ser una buena solución para el problema subyacente de tener ID no únicos en su DOM en múltiples componentes:

vue-uniq-ids

Es una tendencia utilizar componentes. Los componentes son geniales, son pequeños, obvios, fáciles de usar y modulares. Hasta que se trata de la propiedad id.

Algunos atributos de etiquetas HTML requieren el uso de una propiedad id, como label [for], input [form] y muchos de los atributos aria- *. Y el problema con la identificación es que no es modular. Si varias propiedades de identificación en la página tienen el mismo valor, pueden afectarse entre sí.

VueUniqIds le ayuda a deshacerse de este problema. Proporciona el conjunto de directivas relacionadas con la identificación cuyo valor se modifica automáticamente agregando una cadena única mientras se mantiene el atributo fácil de leer.

Si su uid no es usado por otro componente, tengo una idea.

uid: Math.random()

Simple y suficiente.

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 identificadores uninque 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 eso ayude