Einer Liste in Vue vorangestellt

Question

Ich habe eine Komponente benannte Aufgabe, die eine Reihe von Formulareingaben enthält, die sich auf die Aufgabe beziehen. tasks wird von einer GET JSON-Anforderung (vorhandene Einträge) abgerufen.

Jetzt möchte ich eine Schaltfläche haben, um eine neue leere Reihe von Eingaben hinzuzufügen, damit sie neue Einträge hinzufügen können.

<button type="button" @click="addTask()">New</button> 

Ich habe versucht, ein leeres Objekt zu den Aufgaben unshifting:

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

Doch diese Duplikate nur die letzte Reihe meiner Aufgaben, anstatt eine neue Zeile zu Beginn der Aufgaben hinzufügen.

Was ist der beste Weg, Elemente einer bestehenden Liste vorzuziehen?

Answer 1

Wenn Sie die v-for Direktive für eine Komponente verwenden, müssen Sie ein key Attribut angeben und einen Wert angeben, der für jede Komponente eindeutig ist. Andernfalls versucht Vue Elemente wiederzuverwenden.

Vom documentation:

Das key speziellen Attribute wird als Hinweis für Vue virtuellen DOM-Algorithmus in erster Linie verwendet vnodes zu identifizieren, wenn die neue Liste der Knoten gegen die alte Liste diffing. Ohne Schlüssel verwendet Vue einen Algorithmus, der die Elementbewegung minimiert und versucht, Elemente des gleichen Typs so weit wie möglich an Ort und Stelle zu patchen/wiederzuverwenden.

In Ihrem Fall der beste Weg, um einen Schlüssel zu geben wäre eine id Eigenschaft mit jedem task zu verknüpfen und verwenden, die als Schlüssel:

<task v-for="task in tasks" :task="task" :key="task.id"></task>