如何在Vue.js表格中展示JSON首项数据并解决表头重复渲染问题

问题原因 #

你当前代码的表头行<tr>绑定了v-for="item in rates"，会遍历整个rates数组渲染对应数量的表头行。你的rates数组共有2个元素，所以表头行被重复渲染2次，导致出现重复问题。同时你原始数据中没有id字段，之前:key="item.id"/:key="range.id"的绑定是无效的。

修复方案 #

你需要只渲染一次表头，且取第一个rates元素的loanRanges作为表头数据源，直接去掉<tr>上的遍历逻辑，取rates[0].loanRanges遍历即可，同时可以把两次遍历range的逻辑合并为一次，减少冗余代码：

<tr>
  <th>Low LVR</th>
  <th>High LVR</th>
  <!-- 遍历第一个rates项的贷款区间，每个区间输出低值、高值两个表头 -->
  <template v-for="range in rates[0].loanRanges" :key="`header-${range.loanLow}`">
    <th class="text-start" colspan="1">
      {{ range.loanLow.toFixed(2) }}
    </th>
    <th class="text-start" colspan="1">
      {{ range.loanHigh.toFixed(2) }}
    </th>
  </template>
</tr>

如果需要兼容rates为空的场景，可以把遍历源替换为rates?.[0]?.loanRanges ?? []，避免空值报错。

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