Display data in a Vue component with ajax

Question

I seem to be misunderstanding how to pass data to a Vue.js component with an ajax call.

My understanding of how this should work:

I need to create an empty object called campaigns in the data section of my component.
Then call method "fetchCampaigns" on page ready to replace the data object.
fetchCampaign method completes an AJAX call and inside of the success callback use this.$set('campaigns', campaigns) to replace the empty campaign object with the newly returned campaign object
Use v-for on the template to iterate through the campaign object and access values with @{{campaign.type}}

My html (I am use vue router, vue resource and laravel blade) :

<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

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

This is the result of my ajax call from 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}]}

I'm not sure why I can't get my vue component to recognize the new data. Anyone see what I'm missing? TIA

When you think about it, it makes complete sense that it doesn't work. The template tag declares that it's contents are a template - in this case, a vue template. If you aren't in the content, vue ain't gonna work. In other words, your v-for isn't in the template. — Rodney P. Barbati
– Rodney P. Barbati, Commented Jul 6, 2017 at 22:26

retrograde · Accepted Answer · 2015-12-20 16:03:40Z

4

Turns out that v-for="campaign in campaigns" should not go on the template tag, but inside of it.

So this:

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

Should be changed to this:

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

answered Dec 20, 2015 at 16:03

retrograde

2,9796 gold badges31 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pespantelis Over a year ago

Also, you should close the div.block tag.

moses toh Over a year ago

@retrograde, Seems you master vue.js. I need your help. Look here : stackoverflow.com/questions/41843823/…

Collectives™ on Stack Overflow

Display data in a Vue component with ajax

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related