Vue.js: comment définir un ID 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 puis-je définir un ID unique pour chaque instance de Composant?
Merci.
5 réponses
Chaque composant a un id unique qui peut être consulté comme 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 ID, vous pouvez par exemple les générer dans un composant parent.
Bien que la réponse de zxzak soit géniale; _uid n'est pas une propriété api publiée. Pour sauver un mal de tête au cas où il changerait dans le futur, 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;
}
});
}
});
Au point de Nihat (ci-dessus): Evan vous a déconseillé d'utiliser _uid: "la vm _uid est réservée à un usage interne et il est important de la garder privée (et de ne pas s'y fier dans le code utilisateur) afin que nous conservions la flexibilité de changer son comportement pour les futurs cas d'utilisation potentiels. ... Je suggère de générer des uid vous-même [en utilisant un module, un mixin global, etc.]"
En utilisant 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;
},
};
Dans Vue2, utilisez v-bind.
Dire 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>
Il 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 voulez donner des identifiants dom element 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>
J'espère que ça aide