如何在Nuxt.js中展示指定JSON数据内的Qualified等状态数据？

1. 定义或获取数据 #

首先把目标JSON数据存入组件，或者从后端接口获取。如果是硬编码数据，直接在data中定义：

export default {
  data() {
    return {
      recruitmentStats: [{
        "Qualified": [{ "_id": null, "count": 2, "percentagedata": 0.63 }],
        "Submitted": [{ "_id": null, "count": 227, "percentagedata": 72.29 }],
        "Interviewed": [{ "_id": null, "count": 58, "percentagedata": 18.47 }],
        "Selections": [{ "_id": null, "count": 4, "percentagedata": 1.27 }],
        "Placements": [{ "_id": null, "count": 16, "percentagedata": 5.09 }]
      }]
    }
  }
}

如果数据来自API，用asyncData异步获取：

export default {
  async asyncData() {
    const response = await fetch('你的后端API地址')
    const recruitmentStats = await response.json()
    return { recruitmentStats }
  }
}

2. 在模板中渲染数据 #

直接指定字段渲染 #

适合字段固定的场景，写法直观：

<template>
  <div class="stats-container">
    <h2>招聘流程统计</h2>
    <ul class="stats-list">
      <li>
        <strong>Qualified:</strong> 数量 {{ recruitmentStats[0].Qualified[0].count }}，占比 {{ recruitmentStats[0].Qualified[0].percentagedata }}%
      </li>
      <li>
        <strong>Submitted:</strong> 数量 {{ recruitmentStats[0].Submitted[0].count }}，占比 {{ recruitmentStats[0].Submitted[0].percentagedata }}%
      </li>
      <li>
        <strong>Interviewed:</strong> 数量 {{ recruitmentStats[0].Interviewed[0].count }}，占比 {{ recruitmentStats[0].Interviewed[0].percentagedata }}%
      </li>
      <li>
        <strong>Selections:</strong> 数量 {{ recruitmentStats[0].Selections[0].count }}，占比 {{ recruitmentStats[0].Selections[0].percentagedata }}%
      </li>
      <li>
        <strong>Placements:</strong> 数量 {{ recruitmentStats[0].Placements[0].count }}，占比 {{ recruitmentStats[0].Placements[0].percentagedata }}%
      </li>
    </ul>
  </div>
</template>

<style scoped>
.stats-container {
  padding: 16px;
}
.stats-list {
  list-style: none;
  padding: 0;
}
.stats-list li {
  margin: 8px 0;
  padding: 8px;
  border-bottom: 1px solid #f0f0f0;
}
</style>

动态遍历字段渲染 #

如果后续字段可能增减，用v-for遍历更灵活，无需修改模板：

<template>
  <div class="stats-container">
    <h2>招聘流程统计</h2>
    <div 
      v-for="(statData, statName) in recruitmentStats[0]" 
      :key="statName" 
      class="stat-item"
    >
      <strong>{{ statName }}:</strong> 数量 {{ statData[0].count }}，占比 {{ statData[0].percentagedata }}%
    </div>
  </div>
</template>

<style scoped>
.stats-container {
  padding: 16px;
}
.stat-item {
  margin: 8px 0;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
}
</style>

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