所以我正在使用vue-good-table:https://github.com/xaksis/vue-good-table,当我从ajax调用接收数据时,我想创建多个表。该调用是通过facebook API进行的,大约需要20秒才能返回数据并将其推送到tableModel数组中。我正在使用v-for语句来创建可折叠的框,我希望每个可折叠项只显示与该特定广告系列相关的数据。这是我的for循环:
<div v-for="(campaigns, index) in allCampaigns">
<collapse :multiple-active="false">
<collapse-item :title="campaigns.campaign_name">
<div>
<vue-good-table
:columns="columns"
:rows="tableData[index]"
styleClass="vgt-table striped bordered"/>
</div>
</collapse-item>
</collapse>
</div>
我希望只显示与创建的折叠组件的索引相关的tableData。我希望当tableData更新(返回的数据被推入数组)时,它会自动更新表。我在控制台中收到以下错误: [Vue警告]:观察者“行”的回调错误:“TypeError:无法在字符串上创建属性'vgt_id' TypeError:无法在字符串上创建属性“vgt_id” 以下是我将数据推送到tableModel中的方法:
fillTableData(campaigns) {
// console.log(campaigns);
for(let i = 0; i < campaigns.length; i++) {
this.grabClientFacebook(campaigns[i], i);
}
},
grabClientFacebook(campaign, id) {
// console.log(campaign);
this.axios.post("/auth/client/facebookcall",
{'campaign': campaign.id, 'datepreset': this.datepreset}).then((response) => {
console.log(response.data);
let fbcampaign = response.data;
console.log(fbcampaign);
this.tableData.push({'index': id,
'campaignname': fbcampaign[9],
'results': fbcampaign[0],
'reach': fbcampaign[1],
'impressions': fbcampaign[2],
'cpl': fbcampaign[3],
'spent': fbcampaign[4],
'ctr': fbcampaign[5],
'cpc': fbcampaign[6],
'clicks': fbcampaign[7]});
console.log('---------------------');
console.log(this.tableData);
}).catch(error => {console.log(error);
});
}
tableData被指定为tableData:[]