Afficher des données dans une Vue de composant avec ajax

J'ai l'impression d'incompréhension comment passer des données à un Vue.js composant avec un appel ajax.

Ma compréhension de la façon dont cela devrait fonctionner:

  • J'ai besoin de créer un objet vide appelé campagnes dans la section de données de mon composant.
  • Puis d'appeler la méthode "fetchCampaigns" à la page prêt à remplacer les données de l'objet.
  • fetchCampaign méthode se termine un appel AJAX et à l'intérieur de la réussite de rappel de l'utiliser.$set('campagnes', campagnes) pour remplacer le vide de la campagne de l'objet avec le récemment de retour de la campagne d'objet
  • Utiliser le v-sur le modèle de l'itération à travers la campagne de l'objet et les valeurs de l'accès avec @{{campagne.type}}

Mon code html (je suis d'utilisation vue routeur, vue des ressources et de laravel de la lame) :

<router-view></router-view>

<template id="campaignBlock" v-for="campaign in campaigns">
                <div class="row">
                    <div class="block"> 

                <div class="block-title">
                     <h2>Type: <em>@{{campaign.id}}</em></h2>
                </div>

                <div class="row"><!-- Grid Content -->
                    <div class="hidden-sm hidden-xs col-md-4 col-lg-4">  
                        <h2 class="sub-header">@{{campaign.title}}</h2>
                    </div>
                </div>
            </div><!-- END Grid Content -->
</template>

Vue de composant

Vue.component('app-page', {
template: '#campaignBlock',

data: function() {
    return{
        campaigns: []
    }
  },

ready: function () {
    this.fetchCampaigns();
},

methods: {
    fetchCampaigns: function () {
      var campaigns = [];
      this.$http.get('/retention/getCampaigns')
        .success(function (campaigns) {
          this.$set('campaigns', campaigns);

        })
        .error(function (err) {
          campaigns.log(err);
        });
    },
}
})

C'est la raison de mon appel ajax à partir de la console:

{"campaigns":[{"id":1,"user_id":2,"target_id":1,"name":"Test Campaign","description":"This is a test Campaign","target":"Onboarding","created_at":"-0001-11-30 00:00:00","updated_at":"-0001-11-30 00:00:00","deleted_at":null}]}

Je ne sais pas pourquoi je ne peux pas obtenir ma vue composante de reconnaître les nouvelles données. Quelqu'un voit ce que je suis absent? TIA

  • Quand vous pensez à ce sujet, il prend tout son sens que cela ne fonctionne pas. La balise de modèle déclare que le contenu d'un modèle - dans ce cas, une vue de modèle. Si vous n'êtes pas dans le contenu, la vue ne va pas travailler. En d'autres termes, votre v-pour n'est pas dans le modèle.
InformationsquelleAutor retrograde | 2015-12-20