Vue：如何转换从 JSON 文件读取的数据列表

Question

我的目标是根据 JSON 文件的数据创建一个表。由于该表具有实时数据，因此我想在排名发生变化时实施转换。然而，即使数据在更改后重新加载，我也无法使用转换。

这是 JSON 文件：

{"table": [["Player1",1],["Player1",2],["Player1",3]]}

这里是 Vue 代码的最小版本：

<template>
<div id="flip-list-demo" class="demo">
  <transition-group name="flip-list">
    <div class="table-entry" v-for="(rank,index) in playernum" v-bind:key="index">
      <div class="name"> {{ players[index][0] }} </div>
      <div class="rank"> {{ players[index][1] }} </div>
    </div>
  </transition-group>
</div>
</template>

<script>
import game_data from './assets/game_data.json'

export default {
  name: 'App',
  data() {
    return {
      data: game_data,
      players: Object(game_data.table),
      playernum: Object.keys(game_data.table).length,
    };
  },
};
</script>

<style>

.flip-list-move {
  transition: transform 1s;
}

#flip-list-demo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-entry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
}

</style>