vue-good-table选择要显示的数据中的某一行

时间:2018-05-21 18:01:17

标签: ajax for-loop vue.js return-value

所以我正在使用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:[]

0 个答案:

没有答案