Javascript 从json获取数据以填充数据表

你好，开发者。。。我正在尝试使用已通过获取获取的信息动态填充数据表，这些信息以前存储在vuex实例中的变量中，现在在我的小程序中称为computed property。如果我有以下信息：

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  name: "Games",
  data() {
    return {
      search: "",
      headers:[
             {text:'Game#', value:'Game#'},
             {text:'Players in Game',value:'Players inGame'},
             {text:'Permissions',value:'Permissions'},
             {text:'Results',value:'Results'},

      ],

    };
  },
  components: {
  },
  props: ["gameid"],
  methods: {
    ...mapActions(["fetchingJsonEvents", "joinToGame","logOut", "createGame"]),

  },
  computed: {
    ...mapGetters(["getGamesAll", "getUserLogged"]),
    getGamesAll(){
       return this.$store.getters.getGamesAll.games-------->here is where the json is stored
    }
  },
  created() {
    this.fetchingJsonEvents();
  }
};
</script>

从“vuex”导入{mapActions，mapGetters}；
导出默认值{
名称：“游戏”，
数据（）{
返回{
搜索：“，
标题：[
{文本：'Game#'，值：'Game#'}，
{文本：'Players in Game'，值：'Players inGame'}，
{文本：'Permissions'，值：'Permissions'}，
{文本：'Results'，值：'Results'}，
],
};
},
组成部分：{
},
道具：[“玩家ID”]，
方法：{
…映射操作（[“获取JSONEvents”、“JointoName”、“注销”、“createGame”]），
},
计算：{
…映射获取程序（[“getGamesAll”，“getUserLogged”]），
getGamesAll（）{
返回此.$store.getters.getGamesll.games------>这里是存储json的地方
}
},
创建（）{
this.fetchingJsonEvents（）；
}
};

我的html标记调用这个computed和其他所有内容如下：

<v-data-table :search="search" :headers="headers" v-bind:items="getGamesAll">
    <template>
          <tbody>
            <tr v-for="(general, index) in getGamesAll.games" v-bind:key="index">
              <td>Game {{general.id}}:</td>

              <td>xxxxxxxx</td>
              <td>xxxxxxxx</td>
          </tbody>
     </template>
 </v-data-table>

游戏{{general.id}：
xxxxxxxx
xxxxxxxx

但是这个表没有显示任何结果，它使用了一个v-simple-table，但是一旦我尝试用这种方式来做，它就不会。。。。 任何建议……请提前感谢

这是不必要的：

getGamesAll(){
 return this.$store.getters.getGamesAll.games
}

因为您已经使用

mapGetters

：

...mapGetters(["getGamesAll", "getUserLogged"]),

如果您的getter

getGamesAll

有数据，那么这应该可以简单地工作：

<tr v-for="(general, index) in getGamesAll.games" v-bind:key="index">

这种表格不适用……我已经用v-simple-table进行了测试，效果非常好……@EnriqueGF现在真的很好奇，假设v-simple-table有问题，但我希望当您以这种方式删除代码时，

getGamesAll.games

然后在浏览器中看到所有数据，对吗？如果是，那么您可以尝试此操作，只需在

v-data-table

周围添加

If

条件，例如：