javascript - 无法在vue单文件组件中循环数组

Question

我有一个用单文件组件制作的 vue.js 应用程序。我的数据中声明了一个空数组:

data: function () {
  return {
    teamKeys: []
  }
},

然后我用我的方法之一将值插入其中:

fetchTeams (token) {
  var this_ = this
  var url = 'myapiserver.com/teams'
  this.axios.get(url, {
    params: {
      accessToken: token
    }
  })
    .then(function (response) {
      var teams = response.data.teams[0].teams
      teams.forEach(function (t) {
        this_.teamKeys.push(String(t.team_key))
      })
    })
    .catch(function (error) {
      console.log(error)
    })
},

(使用实际的 fetchTeams 方法更新) 然后，在另一种方法中，我尝试使用 forEach 循环它。

fetchRosters (token) {
  var teamKeys = this.teamKeys
  teamKeys.forEach(function (key) {
    console.log(key)
    // do stuff
  })
}

这些方法在mounted中被依次调用:

mounted () {
    this.$nextTick(() => {
      var accessToken = this.$route.query.accessToken
      this.fetchTeams(accessToken)
      this.fetchRosters(accessToken)
    })
  }

forEach 循环由于某种原因不起作用，看起来数组被视为空，因为 forEach 的内部永远不会被访问。另外，如果我在调用 forEach 之前执行此操作:

console.log(this.teamKeys)
console.log(JSON.stringify(this.teamKeys))

第二个输出是空白的[]，第一个输出在控制台中如下所示:

Array(2)
0: "371.l.215756.t.1"
1: "371.l.621475.t.2"
length: 2
__ob__: Observer {value: Array(2), dep: Dep, vmCount: 0}
__proto__: Array

我确信我在做一些愚蠢的事情。我没有正确创建数组吗？我知道数组是什么吗？

Answer 1

fetchTeams (token) {
  var this_ = this
  var url = 'myapiserver.com/teams'
  this.axios.get(url, {
    params: {
      accessToken: token
    }
  })
    .then(function (response) {
      var teams = response.data.teams[0].teams
      teams.forEach(function (t) {
        this_.teamKeys.push(String(t.team_key))
      })
      //this will run it
      this_.fetchRosters(token)
    })
    .catch(function (error) {
      console.log(error)
    })
},