web-dev-qa-db-fra.com

Vue.js: Comment définir un identifiant unique pour chaque instance de composant?

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 définir un identifiant unique pour chaque instance de composant?

Je vous remercie.

vue.js
60
PierreB

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 souhaitez davantage de contrôle sur les identifiants, vous pouvez par exemple les générer dans un composant parent.

112
zxzak

Au sujet de Nihat (ci-dessus): Evan You a déconseillé l’utilisation de _uid: "vm _uid est réservé à un usage interne et il est important de le garder privé (et de ne pas en tenir compte dans le code utilisateur) afin de conserver la possibilité de comportement pour les cas d'utilisation futurs 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 de GitHub pour générer l’UID semble être une meilleure approche:

let uuid = 0;

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

Bien que la réponse de zxzak soit excellente; _uid n'est pas une propriété d'api publiée. Pour éviter les maux de tête au cas où cela changerait, 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() {
                return this._uid;
            }
        });
    }
});
16
Nihat

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>
2
趙曉明

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 les réponses données précédemment:

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 repose pas sur la propriété interne _uid 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" />
1
bernie

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

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

<script>
export default {
  computed: {
    id () {
      return this._uid
    }
  }
}
</script>
1
Cristi Draghici

Ce paquet semble être une bonne solution au problème sous-jacent d’avoir des identifiants non uniques dans votre DOM à travers plusieurs composants:

vue-uniq-ids

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

Certains attributs de balises HTML nécessitent l'utilisation d'une propriété id, telle que label [for], input [form] et de nombreux attributs aria- *. Et le problème avec l'id, c'est qu'il n'est pas modulaire. Si plusieurs propriétés id sur la page auront la même valeur, elles peuvent s’affecter.

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

0
tryforceful