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.
Réponses:
Chaque composant a un identifiant unique auquel on peut accéder en tant que
this._uid
.Si vous voulez plus de contrôle sur les identifiants, vous pouvez par exemple les générer dans un composant parent.
la source
ready
méthode a été supprimée dans Vue 2.0 et au-dessus. J'étais très confus lorsque laready
méthode ne s'exécutait pas. stackoverflow.com/a/40209796/126751data
doit être une fonction qui renvoie un objet: vuejs.org/v2/guide/components.html#data-Must-Be-a-Functionthis._uid
n'est pas valide. Au lieu de cela, générez votre identifiant vous-même, par exemplepublic id = uuid4();
, voir uuid4 ._uid
, il " 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 d'éventuels cas d'utilisation futurs ".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:
la source
Mise à jour: le code générera une erreur si la
._uid
proprié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;
_uid
n'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.la source
_uid
propriété n'existerait plus.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:
Cela ne dépend pas de la
_uid
propriété interne qui est réservée à un usage interne .Utilisez-le comme ceci dans votre composant:
Pour produire quelque chose comme ça:
la source
Puis dans votre code ...
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
.la source
Dans Vue2, utilisez v-bind.
Dis que j'ai un objet pour un sondage
la source
v-for="(option, index) in poll.body.options"
, c'est et utiliserindex
dans votre v-bind.Une approche simple que je n'ai pas vue dans les réponses est:
la source
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)
la source
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
la source
Si votre uid n'est pas utilisé par un autre composant, j'ai une idée.
uid: Math.random()
Simple et assez.
la source
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.
HTML
J'espère que ça aide
la source