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

Question

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

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

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

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

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 in campaigns" 不应该出现在模板标签上，而应该出现在它的内部。

所以这个：

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

应该改成这样：

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

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

Display data in a Vue component with ajax

ajax

vue.js