【发布时间】：2016-03-26 17:58:42
【问题描述】：
我似乎误解了如何使用 ajax 调用将数据传递给 Vue.js 组件。
我对这应该如何工作的理解：
- 我需要在组件的数据部分创建一个名为活动的空对象。
- 然后在准备好替换数据对象的页面上调用方法“fetchCampaigns”。
- fetchCampaign 方法完成 AJAX 调用，并在成功回调内部使用 this.$set('campaigns',campaigns) 将空的活动对象替换为新返回的活动对象
- 在模板上使用 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
【问题讨论】：
-
当您考虑它时，完全可以理解它不起作用。模板标签声明它的内容是一个模板——在本例中是一个 vue 模板。如果你不在内容中，vue 是行不通的。换句话说，您的 v-for 不在模板中。