如何在VueJS2中获取JSON对象键名并展示到HTML表格<th>标签内

解决方法 #

你使用的Vue框架中，v-for遍历对象原生支持获取键名，仅需调整v-for的参数定义即可：

1. v-for遍历对象的完整参数格式为 (值, 键名, 索引)，你原来的写法只取了值和索引，新增第二个参数即可拿到键名
2. 把占位位置直接填入对应的键名变量即可

修改后的完整表格代码如下：

<table>
  <thead>
    <tr>
      <th>Field</th>
      <th>{{ myData.name }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(value, key, index) in myData" :key="index">
      <th>{{ key }}</th>
      <td>{{ value}}</td>
    </tr>
  </tbody>
</table>

渲染后表格的Field列会依次显示entryType、name、name_old、shortName、shortName_old这些键名，与对应行的值一一匹配。

可选优化（非必须） #

如果你需要把键名转换为更易读的显示格式（比如把entryType显示为条目类型），可以提前定义一个键名映射对象，使用时取值即可：

// 定义在你的组件数据中
const keyMap = {
  entryType: '条目类型',
  name: '姓名',
  name_old: '曾用名',
  shortName: '简称',
  shortName_old: '原简称'
}

对应表格中取键名的位置改成：

<th>{{ keyMap[key] || key }}</th>

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