Question

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

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

我需要在组件的数据部分创建一个名为campaign的空对象。
然后调用方法＆＃34; fetchCampaigns＆＃34;在页面上准备替换数据对象。
fetchCampaign方法完成AJAX调用，在成功回调内部使用此。$ set（＆＃39;广告系列＆＃39;，广告系列）用新返回的广告系列对象替换空广告系列对象
在模板上使用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组件

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

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

0 个答案: