J'ai quelques dynamiques <input> éléments dans mon dom rendus à partir d'une boucle for dans vue. J'ai besoin d'ajouter ref à chacun d'eux en ajoutant un Id à chaque ref comme element1, element2, etc. Comment faire cela en Vue ?
<div v-for="(result, index) in data" :key="index">
<input type="text" type="file" ref="element" />
</div>Comment ajouter ref si result.id existe
Il suffit d'utiliser v-bind comme :ref="'element' + result.id" o ref="`element${result.id}`" .
Consulte tripoter ici .
new Vue({
el: '#app',
data: {
data: [{id: 1}, {id: 2}, {id: 3}],
},
mounted() {
console.log(this.$refs);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<div v-for="(result, index) in data" :key="index">
<input type="text" type="file" :ref="'element' + result.id" />
</div>
</div>Édité : Grâce à l'édition de Vamsi, j'ai remplacé index con result.id
Modifié le 8/28 : Merci à grokpot, j'ai ajouté un échantillon alimenté par des littéraux de type Template.
@VamsiKrishna Merci beaucoup pour votre édition. J'ai encore modifié quelques codes pour que cela fonctionne.
Utilisation de v-bind:ref ou simplement :ref .
Suivez ci-dessous un exemple simple comprenant la manière d'accéder à un fichier dynamique ref
<template>
<div>
<div class="inputs" v-for="input in inputs" :key="input.id">
<input type="text" v-model="input.name" :ref="'name' + input.id">
<button @click="displayRef('name' + input.id)">
Click to see the input ref
</button>
<hr>
<button @click="displayAllRefs">Click to see all refs</button>
</div>
</div>
</template>Et le script :
<script>
export default {
data() {
return {
inputs: [
{ id: Date.now(), name: '', lastName: '' }
]
}
},
methods: {
displayRef(ref) {
console.log(this.$refs[ref]) // <= accessing the dynamic ref
console.log('The value of input is:',this.$refs[ref][0].value) //<= outpouting value of input
},
displayAllRefs() {
console.log(this.$refs)
}
}
}
</script>
@TobiasFeil Lorsque l'on utilise des références au sein de v-for , this.$refs[key] renvoie un tableau d'éléments plutôt qu'un seul élément, même si un seul existe. vuejs.org/v2/guide/
Vous avez des références dynamiques et vous avez plusieurs éléments. Pour cibler un seul nœud, il suffit de passer l'index dans les paramètres de la méthode.
new Vue({
el: '#app',
data: {
data: [{id: 1}, {id: 2}, {id: 3}],
},
methods: {
addNewClass(index) {
this.$refs.element[index].classList.add('custom-class')
}
},
})
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="app">
<div v-for="(result, index) in data" :key="index">
<div ref='element' @click='addNewClass(index)' class='custom-container'>
</div>
</div> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
1 votes
Je fais quelque chose de similaire avec mon application et cela semble ralentir considérablement les choses lors de l'ajout dynamique de références à mon composant. Du moins, je pense que c'est ce qui se passe. Je suis curieux de savoir si vous avez vécu une expérience similaire.