Vue setzt die Daten auf ihren ursprünglichen Zustand zurück

In einigen Fällen müssen die Daten in den Daten wiederverwendet werden, aber die Daten in den Daten wurden verschiedenen Formularen, Variablen usw. zugewiesen. Wie kann also der Wert der Daten zurückgesetzt werden?

1. Werte einzeln zuweisen

...
Daten() {
 zurückkehren {
 Name: '',
 Geschlecht: '',
 Beschreibung: ''
 }
}
...
// Werte nacheinander zuweisen this.name = ''
dies.sex = ''
this.desc = ''

Diese Methode ist umständlich und kann natürlich den gewünschten Effekt erzielen, aber es ist mühsam, die Werte einzeln neu zuzuweisen, und der Code sieht unordentlich aus.

Die folgende Methode ist definitiv das, was Sie mögen. Eine Codezeile genügt, um es zu erledigen~

2. Verwenden Sie Object.assign()

MDN-Einführung zu dieser Methode: Die Methode Object.assign() wird verwendet, um die Werte aller aufzählbaren Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt zu kopieren. Es wird das Zielobjekt zurückgegeben.

Verwendung: Object.assign(target, ...sources)

Der erste Parameter ist das Zielobjekt und der zweite Parameter ist das Quellobjekt. Dies bedeutet, dass die Eigenschaften des Quellobjekts in das Zielobjekt kopiert und das Zielobjekt zurückgegeben werden.

Damit können die Eigenschaften eines Objekts auf ein anderes Objekt kopiert werden.

In Vue:

this.$data ruft die Daten im aktuellen Status ab

this.$options.data() Ruft die Daten der Komponente im Anfangszustand ab

Daher können wir die Daten des Anfangszustands in die Daten des aktuellen Zustands kopieren, um den Reset-Effekt zu erzielen:

Objekt.zuweisen(diese.$daten, diese.$optionen.daten())

Wenn Sie natürlich nur ein bestimmtes Objekt oder Attribut in den Daten zurücksetzen möchten:

dieses.Formular = dieses.$options.data().formular

Erweiterungen

Die Methode Object.assign(target, ...sources) kann auch zum Zusammenführen von Objekten verwendet werden:

Konstanten o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };
const obj = Objekt.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, Beachten Sie, dass sich auch das Zielobjekt selbst ändert.

Wenn das Objekt die gleichen Attribute enthält, nehmen Sie das letzte Attribut:

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };
const obj = Objekt.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 } Die Eigenschaft übernimmt die Eigenschaft des letzten Objekts

Das Obige ist meine persönliche Erfahrung. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden. Sollten dennoch Fehler oder unvollständige Überlegungen vorliegen, freue ich mich über eine Korrektur.