Vue de la boucle avec l'index en tant que clé provoque un comportement imprévisible

Question

J'ai un tableau qui est rendu comme un ensemble de composants Vue en utilisant v-for. J'ai besoin d'utiliser :key="" sinon Vue se plaint.

Mon tableau n'a pas d'identificateurs uniques, donc j'utiliser l'index comme

clé

Ma boucle

<card v-for="(item, index) in questions" :question="item" :key="index">{{item}}</card> 

Le tableau a des objets qui peuvent avoir le même contenu

[{name:"jimmy"}, {name:"billy bob"}, {name:"jimmy"}] 

Le problème : dès que je manipule le tableau, les résultats deviennent très imprévisibles. Parfois, les composants sont rendus correctement. Parfois, un nouveau composant apparaît au milieu de la liste v-for même s'il a été inséré dans le tableau. Parfois, après un shift/pop, tous les anciens composants restent et le nouveau push n'apparaît pas.

code

if(this.questions.length > 4) this.questions.shift() 
this.questions.push({name:"willy jim"}) 

Si j'utilise item.name comme la clé, il fonctionne parfaitement bien tant qu'il n'y a pas de noms en double. Si j'utilise item.name+index ou quelque chose si bête, tout ça va Bonkers ...

Answer 1

Utilisation de l'index comme une clé est pas une bonne idée que l'indice recalcule lorsque les modifications du tableau.

Par exemple vous pourriez avoir quelque chose comme ça sur le premier rendu:

<div key="0">Item 1</div> 
<div key="1">Item 2</div> 
<div key="2">Item 3</div> 
<div key="3">Item 4</div> 

Mais, si vous changez alors le tableau, dites que vous supprimez le 2ème point, l'index de chaque élément que vous changera donc fin à avec ceci:

<div key="0">Item 1</div> 
<div key="1">Item 3</div> 
<div key="2">Item 4</div> 

... plutôt que:

<div key="0">Item 1</div> 
<div key="2">Item 3</div> 
<div key="3">Item 4</div> 

Si possible, il serait ag ood idée de donner à chaque élément dans votre tableau un id et l'utiliser comme la clé à la place:

[ 
    { 
    id: 1, 
    name:"jimmy" 
    }, 
    { 
    id: 2, 
    name:"billy bob" 
    }, 
    { 
    id: 3, 
    name:"jimmy" 
    } 
]