J'ai ce composant simple qui a une personne avec des valeurs qu'il doit afficher:
TestFor.vue :
<template>
<div v-for = "(value, key) in this.person">
{{key}} : {{value}}
</div>
</template>
<script scoped>
export default {
props: {
person: {
firstName: 'Bob',
lastNmae: 'Andersen',
age: 27
}
}
}
</script>
3 Réponses :
Vous devez définir la clé par élément de votre liste. dans votre cas, c'est assez trivial:
<div v-for = "(value, key) in this.person" :key='key'>
{{key}} : {{value}}
</div>
Sans la clé, Vue est incapable de lier les données aux composants créés avec v-for. L'absence de clé signifie que toute modification de l'objet que vous avez itéré détruirait et recréerait tous les composants enfants, ce qui entraînerait un certain nombre d'effets secondaires indésirables. Une fois la clé définie, lorsque la collection change, vue calculera la clé pour chaque élément, la comparera avec les clés des enfants existants et agira en conséquence.
@ kerbh0lz - je n'en suis pas sûr - cette exception est lancée par linter et elle est là pour une très bonne raison. Avez-vous des liens pour soutenir cela?
Ne passez pas une chaîne constante à la liaison (: key = "'key'" ), passez la key elle-même: : key = "key" < / code>
Ouais, non, je me suis peut-être trompé ici, je viens de jouer avec jsfiddle.net/n8Lm7x9v/6 et l'utilisation de accessoires ne fonctionne pas alors que l'utilisation de données se passe sans la : clé . J'ai supprimé mon commentaire, désolé;)
@ZedHome : key = 'key' n'est pas : key = "'key'" cependant
@ kerbh0lz Il l'a corrigé.
@ZedHome - Pantalon en feu: stackoverflow.com/posts/62466626/revisions . Ça n'a jamais été là. : P
@parsecer - Je viens de modifier une réponse pour inclure cette raison. :)
J'ai ajouté "vue / require-v-for-key": "off" à package.json et le code d'origine semble fonctionner maintenant. Suis-je bon ou dois-je réactiver cette règle? Cela semble être un ennui sans raison.
@parsecer - Vous êtes mieux avec cette règle en place. Le manque de clé peut vraiment gâcher votre journée, car il peut être assez difficile à déboguer. vuejs.org/v2/guide/list.html#Maintaining-State
Pourriez-vous peut-être ajouter un exemple - le pseudocode serait OK - des effets indésirables? J'ai du mal à comprendre. Par exemple, si je devais changer un firstName ici, rien de mal ne se passerait, car il n'y a pas d'éléments enfants? Mais si le firstName avait des objets JSON imbriqués ou quelque chose, cela casserait les choses?
Comme mentionné dans la documentation, " Il est recommandé de fournir un attribut key avec v-for chaque fois que possible, à moins que le contenu DOM itéré soit simple ou que vous l'ayez intentionnellement en s'appuyant sur le comportement par défaut pour améliorer les performances. "
Si vous modifiez firstName sans la clé, Vue est incapable de dire à quel élément enfant ce changement fait référence, donc il détruira tous les enfants et réitérera à nouveau à travers tous les éléments. Dans ce cas particulier, ce ne serait pas un problème énorme, mais il est toujours préférable d'inclure la clé dans votre itération v-for
Même si vous avez une très bonne raison de ne pas avoir de clé, je ne désactiverais pas le linter global. Au lieu de cela, vous pouvez ajouter un commentaire magique linter en expliquant pourquoi il devrait fonctionner sans la clé. Cependant, il est généralement plus simple de simplement insérer la clé.
L'erreur vient de votre règle linter: require-v- for-key
Vous pouvez le corriger, en ajoutant la liaison de clé:
<div v-for = "(value, key) in this.person" :key="key">
{{key}} : {{value}}
</div>
Pourquoi cette règle a-t-elle été créée en premier lieu? Quel en est l'avantage? Le lien que vous avez inclus ne l'expliquait pas ...
Il est mentionné dans la documentation: vuejs.org/v2/guide/list.html # Maintaining-State Ces exemples simples fonctionnent très bien sans clé, mais le linter est également utilisé pour en faire une habitude, donc plus tard, vous n'obtiendrez pas d'erreurs difficiles à déboguer.
Merci pour le lien!
L'erreur signifie que vous devez lier la propriété key à votre div.
<template>
<div v-for = "(value, key) in person" :key="key">
{{key}} : {{value}}
</div>
</template>
<script scoped>
export default {
props: {
person : {
type : Object,
default : function(){
return {
firstName: 'Bob',
lastNmae: 'Andersen',
age: 27
}
}
}
}
}
}
</script>
Pourquoi l'erreur se produit-elle si selon les documentations elle n'est pas censée se produire ?
Voyez ma réponse. Vous avez un linter configuré pour lancer l'erreur.
D'une part, le didacticiel vidéo utilise des
données, et non desaccessoirescomme vous@ kerbH0lz Pourquoi cela fait-il une différence pour
v-for?autre question, avez-vous vraiment besoin de
this.personau lieu de seulementperson?@Ifaruki Probablement pas, mais dans ma quête pour me débarrasser de l'erreur, je voulais couvrir que ce n'est pas le manque de
ceciqui la causait