Отображение данных в компоненте Vue с ajax

Question

Я, кажется, неправильно понимаю, как передавать данные в компонент Vue.js с помощью вызова ajax.

Мое понимание того, как это должно работать:

• Мне нужно создать пустой объект под названием кампании в разделе данных моего компонента.
• Затем вызывается метод «fetchCampaigns» на странице, готовой для замены объекта данных.
• Метод fetchCampaign завершает вызов AJAX и внутри обратного вызова успешного использования. $ Set («кампании», кампании), чтобы заменить пустой объект кампании новым объектом кампании
• Использовать v-для шаблона для перебирать объекты и доступ к значениям кампании с @ {{}} campaign.type

Моего HTML (Я использование вей маршрутизатор, вю ресурс и Laravel лезвие):

<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.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); 
     }); 
    }, 
} 
}) 

Это результат моего AJAX вызова из консоли:

{"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}]} 

Я не знаю, почему я не могу получить мой вю компонент распознавать новые данные. Кто-нибудь видит, что мне не хватает? TIA

Answer 1

Оказывается, что кампания v-for = "в кампаниях" не должна проходить тег шаблона, а внутри него.

Так что:

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

Должен быть изменен следующим образом:

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