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.
Vous devez vous connecter pour publier un commentaire.
S'avère que v for="campagne dans les campagnes" ne devrait pas aller sur la balise de modèle, mais à l'intérieur.
Donc:
Doit être changé à cela:
div.block
tag.