无法访问道具中的数据

时间:2019-05-22 16:29:30

标签: vue.js

我需要访问通过道具传递的数据来构建热图。数据在那里,但是我不能使用它。我想使用我的getData()函数来遍历我的数据。

如果我在模板中调用"gamedata.teamA.players[0].pos[0].posY",它将打印位置,但不能在函数中使用它。


export default {
    name: "HeatMap",
    props: ["gamedata"],
    data: function() {
      return {
        teamdata: [[0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0]],
        chartOptions: {
            ...
    },
    methods: {
      getData: function() {
          for(var i = 0; i < this.gamedata.teamA.players.length;i++ ){
            for(var j = 0; j < this.gamedata.teamA.players[i].pos.length;j++){
                this.teamdata[this.getPos(this.gamedata.teamA.players[i].pos[j].posY)][this.getPos(this.gamedata.teamA.players[i].pos[j].posX)]++;
            }
        }
      },
        ...,
    mounted() {
      this.getData();
      this.series = this.populate();
    }

};

我在控制台上收到以下错误:

"[Vue warn]: Error in mounted hook: "TypeError: this.gamedata.teamA is undefined""

1 个答案:

答案 0 :(得分:0)

当我尝试mount()时,似乎没有加载数据。在挂架开始工作之前使用观察器。

watch: { gamedata(){ this.getData()} }, 
mounted() {
  this.series = this.populate();
}