VueJS asynchrone des données de composants et de promesses

Essayer VueJS 2.0 RC, et à l'aide de l'extraction de l'API de charger des données pour certains des composants. Voici un exemple fictif:

const Component = {
  template: '#comp',
  name: "some-component",
  data: function () {
    return {
      basic: data.subset,
      records: function () {
        return fetch('/datasource/api', {
          method: 'get'
        }).then(function (response) {
          return response.json();
        }).then(function (response) {
          if (response.status == "success") {
            return response.payload;
          } else {
            console.error(response.message);
          }
        }).catch(function (err) {
          console.error(err);
        });
      }
    }
  }
};

La data objet est une application à l'échelle mondiale de l'état, défini avant l'application de l'initialisation, et seul un sous-ensemble de ce qui est nécessaire dans le composant, ainsi que de la partie. L'ensemble principal de l'élément de données à partir d'un autre point de terminaison qui je suis en train de l'appeler. Cependant, la data propriété s'attend à un objet, et c'est le retour d'une Promesse qu'il ne peut pas vraiment utiliser dans le contexte d'une boucle dans le modèle pour le rendu, etc (par exemple,v-for="record in records")

Je suis aller sur ce de la mauvaise façon? Quelle est la méthode pour obtenir les données records propriété pour mettre à jour une fois qu'il est entièrement récupérée? Est-il un moyen pour forcer le code pour arrêter jusqu'à ce que la promesse est résolu (le rendant de ce fait la synchronisation)? Le composant est inutile sans les données de toute façon, il y a une période d'attente avant de pouvoir être utilisé indépendamment.

Qu'est-ce que le droit chemin asynchrone remplir une composante du champ de données sans utiliser de plugins comme vue-async ou de la vue-des ressources?

(Je sais que je pourrais utiliser le XHR/jQuery méthodes de la non-promesse d'appels ajax pour ce faire, mais je veux apprendre comment le faire en utilisant le fetch)

---

Mise à jour: j'ai essayé de définir un crochet, et une méthode pour charger les données, comme ceci, mais pas de dés - dans mes propres expériences, les dossiers de la propriété ne parvient pas à mettre à jour une fois qu'il est chargé. Elle ne change pas, même si les données sont correctement extraites (avec succès des journaux dans la console).

Pourrait avoir quelque chose à faire avec moi à l'aide de vue-routeur et le composant que je m'occupe de déclenchement lorsque le lien est cliqué, plutôt que d'être un régulier de la Vue de composant. Étudier plus tard...

---

Mise à jour #2: Si je continue à enquêter sur l'jsfiddle approche ci-dessus et journal this.records et response.payload à la console, il affiche les enregistrements de l'objet remplie. Toutefois, cela ne semble pas déclencher un changement dans le modèle ou le composant lui-même en inspectant avec Vue outils de dev, les dossiers de la propriété reste un tableau vide. En effet, si j'ajoute une méthode logstuff et un bouton dans le modèle qui l'appelle, et alors cette méthode journal this.records dans la console, il enregistre un observateur avec un tableau vide:

Maintenant, je me demande pourquoi les données de propriété d'un composant serait pas mis à jour même après il est explicitement défini sur une autre valeur. Essayer de monter un observateur pour $route qui déclenche la reload méthode, mais pas de dés - chaque chargement ultérieur de cette route, en effet, re-problème de l'extraction, et les journaux de la console this.records comme rempli (à partir de fetch), mais la "vraie" this.records reste un tableau vide.

OriginalL'auteur Swader | 2016-08-28