使用ajax在Vue组件中显示数据

Question

我似乎误解了如何使用 ajax 调用将数据传递给 Vue.js 组件。

我对这应该如何工作的理解：

• 我需要在组件的数据部分创建一个名为活动的空对象。
• 然后在准备好替换数据对象的页面上调用方法“fetchCampaigns”。
• fetchCampaign 方法完成 AJAX 调用，并在成功回调内部使用 this.$set('campaigns', campaign) 将空的活动对象替换为新返回的活动对象
• 在模板上使用 v-for 遍历活动对象并使用 @{{campaign.type}} 访问值

我的 html（我使用 vue 路由器、vue 资源和 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}]}

我不确定为什么我的 vue 组件无法识别新数据。有人看到我缺少什么吗？TIA

Answer 1

事实证明， v-for="campaign incampaign" 不应该出现在模板标签上，而应该出现在模板标签内部。

所以这：

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

应该改成这样：

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