Vue调用API填充表格时出现无限循环问题求助

问题根源 #

你在模板中直接调用{{ this.rows(table.id) }}，这会导致每次组件渲染时都会执行这个异步方法。而方法中修改了this.TableRows，触发组件重新渲染，进而再次调用rows方法，形成无限循环。

修复步骤及优化代码 #

1. 修正模板代码 #

移除模板中直接调用rows方法的部分，只保留数据循环：

<tbody>
    <!-- 移除{{ this.rows(table.id) }}，避免每次渲染触发方法 -->
    <div v-for="(item, idx) in TableRows" :key="idx">
        {{ item }}
    </div>
</tbody>

2. 调整数据获取逻辑 #

将数据获取放到组件生命周期钩子或监听事件中，只在需要时执行（比如初始化、表格ID变化时）：

// 示例：使用watch监听table.id变化，初始化和ID改变时自动获取数据
watch: {
  'table.id': {
    async handler(newTableId) {
      await this.fetchTableRows(newTableId);
    },
    immediate: true // 组件初始化时立即执行一次
  }
},

// 或者在组件挂载时获取数据（如果table.id初始化时已确定）
async mounted() {
  await this.fetchTableRows(this.table.id);
},

methods: {
  // 重构数据获取方法，避免混用await和then
  async fetchTableRows(tableID) {
    try {
      const response = await this.getRows(tableID);
      // 检查响应是否成功
      if (!response.ok) throw new Error(`请求失败：${response.status}`);
      
      const items = await response.json();
      // 用map简化数据转换
      this.TableRows = items.map(item => JSON.parse(item.row_data));
    } catch (err) {
      console.error('加载表格数据出错:', err);
      // 可添加用户友好的错误提示
    }
  },

  getRows(ID) {
    return fetch(`http://endpoint/${String(ID)}`, {
      method: 'GET',
      headers: {
        "Content-Type": "application/json", // 改为json类型，匹配响应解析
        "Authorization": `Bearer ${access_token}`
        // 移除Access-Control-*请求头：这些是服务器响应头，客户端不需要发送
      }
    });
  }
}

3. 关键优化点 #

• 避免模板中执行修改数据的方法：模板表达式应仅用于渲染，不要包含会改变组件状态的逻辑。
• 统一异步代码风格：不要同时混用await和.then()，用await让代码更清晰，配合try/catch处理请求异常。
• 修正请求头：Access-Control-Allow-*这类字段是服务器返回的响应头，客户端请求时不需要携带，否则可能引发不必要的CORS问题。
• 简化数据转换：用Array.map()替代forEach+push，代码更简洁高效。

后续建议 #

验证数据正确后，记得把模板中的<div>替换成<tr>和<td>，符合HTML表格的标准结构，避免布局问题。

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