Prépendre à une liste en vue

Question

J'ai un composant nommé tâche qui contient une rangée de champs de formulaire liés à la tâche. tâches est récupéré à partir d'une requête GET JSON (entrées existantes).

Maintenant, je veux ajouter un bouton pour ajouter une nouvelle rangée vide de champs afin qu'ils puissent ajouter de nouvelles entrées.

Nouveau

J'ai essayé de rajouter un objet vide aux tâches:

addTask() {
    this.tasks.unshift({});
},

Cependant, cela duplique simplement la dernière rangée de mes tâches au lieu d'ajouter une nouvelle rangée au début des tâches.

Quel est le meilleur moyen de préfixer des éléments à une liste existante?

Answer 1

Lorsque vous utilisez la directive v-for sur un composant, vous devez spécifier un attribut key, en fournissant une valeur qui sera unique pour chaque composant. Sinon, Vue essayera de réutiliser les éléments.

D'après la documentation:

L'attribut spécial key est principalement utilisé comme indice pour l'algorithme du DOM virtuel de Vue afin d'identifier les VNodes lors de la comparaison de la nouvelle liste de nœuds avec l'ancienne liste. Sans clés, Vue utilise un algorithme qui minimise le déplacement des éléments et tente de patcher/réutiliser les éléments du même type sur place autant que possible.

Dans votre cas, la meilleure façon de spécifier une clé serait d'associer une propriété id à chaque tâche et d'utiliser cela comme clé: