Pourquoi la clé ? — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 5)

Pourquoi la clé ?

Composants · niveau 2

Énoncé

Chaque ligne de commande suivante a un champ de quantité, état local du composant LigneCommande.


<div id="app">
  <ul>
    <li v-for="(ligne, i) in lignes" :key="i">
      <ligne-commande :titre="ligne.titre"></ligne-commande>
      <button type="button" @click="lignes.splice(i, 1)">Retirer</button>
    </li>
  </ul>
</div>

<template id="modele-ligne-commande">
  <label>{{ titre }} — quantité <input v-model="quantite" type="number" min="1"></label>
</template>

On saisit les quantités 5, 2 et 1, puis on clique sur le premier bouton « Retirer ». Qu'affiche la page ? Expliquer, et corriger.

Corrigé


Avant :
Programmation Java — quantité = 5
Le Petit Prince — quantité = 2
L’Étranger — quantité = 1
Après « Retirer » sur la première ligne :
Le Petit Prince — quantité = 5
L’Étranger — quantité = 2

La ligne « Programmation Java » a bien disparu, mais les quantités sont décalées : « Le Petit Prince » affiche 5 et « L'Étranger » 2. La clé est la position : avant, les clés étaient 0, 1, 2 ; après, 0, 1. Vue garde les composants de clés 0 et 1, avec leur état (5 et 2), leur transmet les nouveaux titres, et supprime le composant de clé 2, celui qui contenait 1. La correction consiste à prendre une clé liée au livre : :key="ligne.isbn". Vue supprime alors le composant de « Programmation Java », et les autres gardent leurs quantités. (Une meilleure conception rangerait d'ailleurs la quantité dans les données du parent, qui possède la commande.)