使用vue-good-table展示对应数据报错：无法创建vgt_id属性

这个报错的核心原因很明确：你传给vue-good-table的rows属性不是它期望的数组类型，而是单个对象，导致组件内部把对象当成可迭代元素处理时，误操作到了字符串类型的值。

让我拆解下问题：

• 你的模板中用:rows="tableData[index]"绑定数据，但当前tableData的结构是通过push单个对象生成的数组，所以tableData[index]是单个对象（而非包含该对象的数组）。
• vue-good-table要求rows必须是数组（每个元素对应一行数据），当你传入单个对象时，组件会尝试遍历这个对象的属性（比如键或值），而这些属性值很多是字符串类型——字符串是原始类型，无法添加自定义属性（比如组件需要的vgt_id），于是就抛出了那个错误。

同时，你的异步请求处理还存在一个隐藏问题：push是按请求完成顺序添加数据的，这会导致tableData的索引和allCampaigns的索引无法一一对应，最终出现面板和数据不匹配的情况。

修复步骤 #

1. 调整tableData的初始化结构

首先，我们需要让tableData成为一个二维数组：外层数组对应每个campaign，内层数组存储该campaign的行数据（即使只有一行，也要用数组包裹）。

在你获取到allCampaigns之后，先初始化tableData为对应长度的空数组：

// 假设你在某个钩子或方法中拿到了allCampaigns
this.tableData = Array(this.allCampaigns.length).fill([]);

2. 修改异步请求的数据赋值逻辑

不再用push向tableData添加元素，而是直接把数据放到对应索引的内层数组中：

fillTableData(campaigns) {
  // 先初始化tableData，确保和campaigns长度一致
  this.tableData = Array(campaigns.length).fill([]);
  for(let i = 0; i < campaigns.length; i++) {
    this.grabClientFacebook(campaigns[i], i);
  }
},
grabClientFacebook(campaign, id) {
  this.axios.post("/auth/client/facebookcall", {'campaign': campaign.id, 'datepreset': this.datepreset})
    .then((response) => {
      let fbcampaign = response.data;
      // 将数据push到对应索引的内层数组中
      this.tableData[id].push({
        '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]
      });
    })
    .catch(error => {console.log(error); });
}

这里用push操作内层数组是安全的——Vue可以检测到数组的变异方法（比如push、pop），会自动触发视图更新。

3. 验证模板绑定

你的模板代码不需要修改，现在tableData[index]会是一个数组（初始为空，请求完成后包含一行数据），符合vue-good-table对rows属性的要求：

<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>

额外建议 #

• 如果你的Facebook API返回的是多行数据（比如每个campaign有多个条目），这个结构也能完美适配，只需要把所有行数据push到对应内层数组即可。
• 可以给表格添加加载状态，比如在请求未完成时显示加载动画，提升用户体验。

内容的提问来源于stack exchange，提问作者Brad Goldsmith