Je veux créer un composant avec Vue.js contenant une étiquette et une entrée. par exemple :

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

Comment puis-je définir un ID unique pour chaque instance de composant?

Je vous remercie.

Chaque composant a un identifiant unique auquel on peut accéder en tant que 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 vous voulez plus de contrôle sur les identifiants, vous pouvez par exemple les générer dans un composant parent.

Pour le point de Nihat (ci-dessus): Evan You a déconseillé d'utiliser _uid: "Le vm _uid est réservé à un usage interne et il est important de le garder privé (et de ne pas s'y fier dans le code utilisateur) afin que nous gardions la flexibilité de changer son comportement pour de futurs cas d'utilisation potentiels. ... Je suggérerais de générer vous-même des UID [en utilisant un module, un mixin global, etc.] "

Utiliser le mixin suggéré dans ce problème GitHub pour générer l'UID semble être une meilleure approche:

let uuid = 0;

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

Mise à jour: le code générera une erreur si la ._uidpropriété n'existe pas dans l'instance afin que vous puissiez la mettre à jour pour utiliser quelque chose de personnalisé ou une nouvelle propriété d'identifiant unique si elle est fournie par Vue.

Bien que la réponse de zxzak soit excellente; _uidn'est pas une propriété d'API publiée. Pour enregistrer un mal de tête au cas où il changerait à l'avenir, vous pouvez mettre à jour votre code avec un seul changement avec une solution de plugin comme ci-dessous.

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

Mettre à jour

J'ai publié le plugin vue-unique-id Vue pour cela sur npm .

Répondre

Aucune des autres solutions ne répond à l'exigence d'avoir plus d'un élément de formulaire dans votre composant. Voici mon point de vue sur un plugin qui s'appuie sur des réponses précédemment données:

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

Cela ne dépend pas de la _uidpropriété interne qui est réservée à un usage interne .

Utilisez-le comme ceci dans votre composant:

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

Pour produire quelque chose comme ça:

<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

Puis dans votre code ...

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

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

De cette façon, vous ne chargez pas l'intégralité de la bibliothèque lodash, ni même enregistrez la bibliothèque entière dans node_modules.

Dans Vue2, utilisez v-bind.

Dis que j'ai un objet pour un sondage

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

Une approche simple que je n'ai pas vue dans les réponses est:

<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 vous utilisez TypeScript, sans plugin, vous pouvez simplement ajouter un identifiant statique dans votre composant de classe et l'incrémenter dans la méthode created (). Chaque composant aura un identifiant unique (ajoutez un préfixe de chaîne pour éviter la collision avec d'autres composants qui utilisent le même conseil)

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

Ce package semble être une bonne solution pour le problème sous-jacent d'avoir des identifiants non uniques dans votre DOM sur plusieurs composants:

vue-uniq-ids

C'est une tendance à utiliser des composants. Les composants sont sympas, ils sont petits, évidents, faciles à utiliser et modulaires. Jusqu'à ce qu'il s'agisse de la propriété id.

Certains attributs de balise HTML nécessitent l'utilisation d'une propriété id, comme label [for], input [form] et de nombreux attributs aria- *. Et le problème avec l'identifiant est qu'il n'est pas modulaire. Si plusieurs propriétés d'identifiant sur la page ont la même valeur, elles peuvent s'influencer mutuellement.

VueUniqIds vous aide à vous débarrasser de ce problème. Il fournit l'ensemble des directives liées à l'id dont la valeur est automatiquement modifiée en ajoutant une chaîne unique tout en gardant l'attrbitue facile à lire.

Si votre uid n'est pas utilisé par un autre composant, j'ai une idée.

uid: Math.random()

Simple et assez.

Cela peut également être réalisé en utilisant ce modèle (Vue 2.0 v-bind), alors disons que vous avez une liste d'éléments à parcourir et que vous souhaitez donner des identifiants uninque à un élément 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> 

J'espère que ça aide