在Vue.js中如何遍历API返回的JSON对象，用v-for渲染HTML表格

Vue.js 实现v-for渲染普通HTML表格 #

修改要点

• data 中 items 初始值从空字符串改为空数组，避免 v-for 遍历非数组类型触发报错
• table 标签内新增 tbody 结构，通过 v-for 遍历接口返回的每一条数据生成表格行
• v-for 必须绑定唯一 key 值，此处直接使用数据的 id 字段即可

完整实现代码：

<template>
  <div id="app">
    <table>
    <thead>
      <tr>
        <th>id</th>
        <th>meta</th>
        <th>title</th>
        <th>is private</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.meta }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.is_private }}</td>
      </tr>
    </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    }
  },
  created() {
    axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/pages/`)
    .then(response => {
      // 如果接口返回的列表嵌套在response.data的子字段下（比如常见的results字段），可自行调整取值层级即可
      this.items = response.data
    })
  }
}
</script>

<style>

</style>

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