如何使用Vue异步从API获取数据生成表格？代码问题排查修复

云上老周

2026-7-30

问题修复方案

你的代码存在几处关键问题，导致Vue无法正常工作且数据无法正确渲染，以下是具体修复方案：

1. 补充Vue核心库引入

如果HTML中未引入Vue，Vue实例无法初始化，需在HTML的<head>或<body>末尾添加Vue的CDN引用：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2. 修复JavaScript代码的语法与逻辑错误

语法错误：`mounted`钩子未闭合

原代码的mounted部分缺失闭合的}，导致语法报错，Vue无法正常实例化。

逻辑错误：数据赋值方式错误

fetch返回的finalRes是用户对象数组，你错误地给rows数组本身添加id/name/phone属性，正确做法是直接将rows替换为获取到的数组。

修正后的完整代码

HTML部分（含Vue引入）

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <table>
    <thead>
      <tr>
        <th v-for="(header, key) in column" :key="key">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.phone }}</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript部分

var app = new Vue({
  el: "#app",
  data: {
    column: {
      id: "ID",
      name: "Full Name",
      phone: "Phone",
    },
    rows: [], // 初始化空数组即可，无需默认空对象
  },

  methods: {
    async fetchData() {      
      const response = await fetch("https://jsonplaceholder.typicode.com/users");      
      const finalRes = await response.json();
      this.rows = finalRes; // 直接将获取到的用户数组赋值给rows
    },    
  },
  mounted() {
    this.fetchData();
  } // 补上缺失的闭合括号
});