Pour dire les choses aussi simplement que possible:
J'ai une boucle v-for. Je voudrais accéder à un élément spécifique dans l'une des itérations de la boucle. Pour des raisons, je ne peux le faire qu'en utilisant la réf. Y a-t-il un moyen de faire cela?
J'ai essayé différentes méthodes pour y parvenir, mais cela retourne toujours indéfini. Mon code fonctionne bien en dehors d'une boucle v-for.
La documentation de vue ne couvre pas cette instance.
La boucle simplifiée:
doThing() {
card = elements.create('card');
card.mount(this.$refs.card);
}
3 Réponses :
Les références dans une boucle v-for deviennent des tableaux avec chaque élément à l'index dans lequel il apparaît dans le document. Il est traité ici ~ https://vuejs.org/v2/api/#ref
Lorsqu'elle est utilisée sur des éléments / composants avec
v-for, la référence enregistrée sera un tableau contenant des nœuds DOM ou des instances de composant.
Donc pour "accéder à un élément spécifique à l'intérieur d'une des itérations de la boucle" , vous utiliseriez quelque chose comme
card.mount(this.$refs.card[someIndex])
p>
Malheureusement, il n'est pas garanti que l'ordre dans ce tableau de référence soit dans le même ordre que les éléments du tableau de données. Cela rend les références de tableau assez inutiles :(
@JosephSilber est vrai mais OP n'a pas dit à quel élément spécifique il voulait faire référence. Peut-être est-ce n'importe quel élément?
Merci les gars. J'ai besoin d'accéder à un élément spécifique. Serait-il possible d'obtenir les références en tant qu'objet (en utilisant v-for = "(item, key, index) in items")? Ensuite, utilisez la clé pour obtenir l'élément spécifique?
Étant donné que les références de tableau ne sont pas garanties d'être dans l'ordre d'origine, j'ai trouvé plus utile d'enregistrer une référence sur le parent, puis d'utiliser l'API DOM standard pour trouver l'élément souhaité.
{
methods: {
getCardAt(index) {
return this.$refs.cards.children[index];
}
}
}
<div ref="cards">
<div v-for="(item, i) in items">
<!-- this is a card -->
</div>
</div>
Vous pouvez essayer ceci:
<div v-for="(item, i) in items">
<div :ref="`card-${i}`"></div>
</div>