VueJS asynchrone Komponentendaten und Versprechen

Probieren Sie VueJS 2.0 RC aus und laden Sie mithilfe der Fetch-API einige Daten für einige der Komponenten. Hier ist ein Beispiel:

Das data -Objekt ist ein globaler Anwendungszustand, der vor der Initialisierung der Anwendung definiert wird und nur eine Teilmenge davon in der Komponente benötigt, daher dieser Teil. Der Hauptdatensatz der Komponente stammt von einem anderen Endpunkt, den ich aufrufen möchte. Die data -Eigenschaft erwartet jedoch ein Objekt und erhält eine Promise zurück, die sie im Kontext einer Schleife in der Vorlage zum Rendern usw. nicht verwenden kann (z. B. v-for="record in records" )

Gehe ich das falsch herum? Was ist der Ansatz, um die Eigenschaft "% records " zu aktualisieren, sobald sie vollständig abgerufen wurde? Gibt es eine Möglichkeit, den Code zu stoppen, bis das Versprechen verrechnet wird (wodurch es effektiv synchronisiert wird)? Die Komponente ist sowieso ohne die Daten nutzlos, es gibt also eine Wartezeit, bevor sie trotzdem verwendet werden kann.

Was ist der richtige Weg um das Datenfeld einer Komponente asynchron zu füllen, ohne Plugins wie vue-async oder vue-resource zu benutzen?

(Ich weiß, dass ich die XHR / jQuery-Methoden von nicht-versprechen-Ajax-Aufrufen verwenden könnte, um dies zu tun, aber ich möchte lernen, wie man es mit fetch macht)

Update: Ich habe versucht, einen erstellten Hook zu definieren, und eine Methode, um die Daten zu laden, so , aber keinen Würfel - in meinem eigenen experiments, die sets -Eigenschaft kann nicht aktualisiert werden, sobald sie geladen ist. Es ändert sich nicht, obwohl die Daten erfolgreich abgerufen wurden (meldet sich erfolgreich in der Konsole an).

Könnte etwas mit mir zu tun haben, indem ich den Vue-Router und die Komponente verwende, die ich auslocke, wenn ein Link angeklickt wird, anstatt eine reguläre Vue-Komponente zu sein. Nachforschen weiter ...

Update # 2: Wenn ich weiter oben den jsfiddle-Ansatz untersuche und this.records und response.payload an der Konsole logge, wird das Datensatzobjekt angezeigt, das gerade gefüllt wird. Dies scheint jedoch keine Änderung in der Vorlage oder der Komponente selbst auszulösen. Bei der Überprüfung mit den Vue-Entwicklungstools bleibt die Eigenschaft records ein leeres Array. In der Tat, wenn ich eine Methode logstuff und eine Schaltfläche in die Vorlage, die es aufruft, und dann diese Methode log this.records in die Konsole hinzufügen, protokolliert sie einen Beobachter mit einem leeren Array:

Nun frage ich mich, warum die Dateneigenschaft einer Komponente nicht aktualisiert wird, obwohl sie explizit auf einen anderen Wert gesetzt ist. Versucht, einen Watcher für $route einzurichten, der die reload -Methode auslöst, aber keine Würfel - jeder nachfolgende Ladevorgang dieser Route gibt den Abruf tatsächlich erneut aus, und die Konsole protokolliert this.records als gefüllt (von innerhalb des Abrufs), aber das "echte" this.records bleibt ein leeres Array.