Ich habe eine Komponente mit einem bestimmten Satz von Startdaten:
data: function (){
return {
modalBodyDisplay: 'getUserInput', // possible values: 'getUserInput', 'confirmGeocodedValue'
submitButtonText: 'Lookup', // possible values 'Lookup', 'Yes'
addressToConfirm: null,
bestViewedByTheseBounds: null,
location:{
name: null,
address: null,
position: null
}
}
Dies sind Daten für ein modales Fenster. Wenn es angezeigt wird, möchte ich, dass es mit diesen Daten beginnt. Wenn der Benutzer das Fenster abbricht, möchte ich alle Daten auf dieses zurücksetzen.
Ich weiß, dass ich eine Methode zum Zurücksetzen der Daten erstellen und einfach alle Dateneigenschaften manuell auf das Original zurücksetzen kann:
reset: function (){
this.modalBodyDisplay = 'getUserInput';
this.submitButtonText = 'Lookup';
this.addressToConfirm = null;
this.bestViewedByTheseBounds = null;
this.location = {
name: null,
address: null,
position: null
};
}
Aber das scheint wirklich schlampig. Wenn ich jemals Änderungen an den Dateneigenschaften der Komponente vornehme, muss ich sicherstellen, dass ich daran denke, die Struktur der Rücksetzmethode zu aktualisieren. Das ist nicht absolut schrecklich, da es sich um eine kleine modulare Komponente handelt, aber es lässt den Optimierungsteil meines Gehirns schreien.
Die Lösung, von der ich dachte, dass sie funktionieren würde, wäre, die anfänglichen Dateneigenschaften in einer ready
Methode zu erfassen und diese gespeicherten Daten dann zum Zurücksetzen der Komponenten zu verwenden:
data: function (){
return {
modalBodyDisplay: 'getUserInput',
submitButtonText: 'Lookup',
addressToConfirm: null,
bestViewedByTheseBounds: null,
location:{
name: null,
address: null,
position: null
},
// new property for holding the initial component configuration
initialDataConfiguration: null
}
},
ready: function (){
// grabbing this here so that we can reset the data when we close the window.
this.initialDataConfiguration = this.$data;
},
methods:{
resetWindow: function (){
// set the data for the component back to the original configuration
this.$data = this.initialDataConfiguration;
}
}
Das initialDataConfiguration
Objekt ändert sich jedoch zusammen mit den Daten (was sinnvoll ist, da bei der initialDataConfiguration
Lesemethode der Umfang der Datenfunktion ermittelt wird.
Gibt es eine Möglichkeit, die anfänglichen Konfigurationsdaten abzurufen, ohne den Bereich zu erben?
Überdenke ich das und es gibt einen besseren / einfacheren Weg, dies zu tun?
Ist die Hardcodierung der Anfangsdaten die einzige Option?
quelle
Antworten:
quelle
[Vue warn]: Avoid replacing instance root $data. Use nested data properties instead.
Object.assign
stattdessen verwenden. Hier ist der ArbeitscodeSo setzen Sie die Komponente
data
in einer aktuellen Komponenteninstanz zurück:Privat habe ich eine abstrakte modale Komponente, die Slots verwendet, um verschiedene Teile des Dialogs zu füllen. Wenn angepasste Modal-Wraps dieses abstrakte Modal umschließen, gehören die in Slots angegebenen Daten zum übergeordneten Komponentenbereich . Hier ist die Option des abstrakten Modals, das die Daten jedes Mal zurücksetzt, wenn das angepasste Modal angezeigt wird (ES2015-Code):
Sie können Ihre modale Implementierung natürlich fein abstimmen - obiges kann auch in einem
cancel
Hook ausgeführt werden.Bedenken Sie, dass die Mutation von
$parent
Optionen aus dem Kind nicht empfohlen wird. Ich denke jedoch, dass dies gerechtfertigt sein kann, wenn die übergeordnete Komponente nur das abstrakte Modal anpasst und nicht mehr.quelle
data
. Wenn Sie alsothis
Ihredata
Methode verwenden, können Sie den Kontext anwenden mit:Object.assign(this.$data, this.$options.data.apply(this))
Verwenden Sie also Folgendes:
Object.assign(this.$data, this.$options.data.apply(this))
cc diese Antwort war ursprünglich hier
quelle
Ich musste die Daten innerhalb einer untergeordneten Komponente auf den ursprünglichen Zustand zurücksetzen. Dies hat bei mir funktioniert:
Übergeordnete Komponente, die die Methode der untergeordneten Komponente aufruft:
Untergeordnete Komponente:
Definieren der clearallData () -Methode, die von der übergeordneten Komponente aufgerufen werden soll
quelle
Wenn Sie sich über die Warnungen ärgern, ist dies eine andere Methode:
Sie müssen sich nicht mit $ data anlegen.
quelle