Javascript Can'；在vue单文件组件中通过数组的t循环

我有一个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 () {
    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

我肯定我在做傻事。我是否没有正确创建阵列？我知道数组是什么吗？

我想你错过了第三段末尾的“

）

”

我想你错过了第三段末尾的“

）

”

fetchTeams (token) {
  var this_ = this
  var url = 'myapiserver.com/teams'
  return this.axios.get(url, {
    params: {
      accessToken: token
    }
  })
}

mounted () {
  this.$nextTick(() => {
    var accessToken = this.$route.query.accessToken
    this
      .fetchTeams(accessToken)
      .then(function (response) {
        var teams = response.data.teams[0].teams
        teams.forEach(function (t) {
          this_.teamKeys.push(String(t.team_key))
        })
        this.fetchRosters(accessToken)    
      })
      .catch(function (error) {
        console.log(error)
      })
  })
}

或：

或：

---

为什么要使用JSON.stringifying数组？我不知道，我正在尝试诊断问题。我猜你不能这么做？什么是

console.log（this.teamKeys.length）

hmm，出于某种原因它是0。这是没有意义的，因为如果我之前做了

console.log（this.teamKeys）

，它会在控制台中显示

length:2

。你正在运行一个asyn任务，这就是为什么它在需要时没有得到teamKeys。为什么你需要JSON.stringying数组？我不知道，我正在尝试诊断问题。我猜你不能这么做？什么是

console.log（this.teamKeys.length）

hmm，出于某种原因它是0。这是没有意义的，因为如果我之前做了

console.log（this.teamKeys）

，它会在控制台中显示

length:2

。您正在运行一个asyn任务，这就是为什么它在需要时无法获得团队密钥的原因您是对的，谢谢（修复），但在我的实际代码中它是正确的您是对的，谢谢（修复），但这在我的实际代码中是正确的是，这看起来是个错误，但t.team_键实际上来自axios调用。为了简化，我省略了这部分代码。我的问题可能不清楚。更新。我不认为这部分代码是相关的，因为数组似乎正在获取数据，所以我假设

push

正在工作。我可以在我的vue开发工具中看到其中的数据。是的，这两个工具都有意义。根据zabusa的回答，我找到了一些有效的方法，但也可以尝试这些方法。是的，这看起来是个错误，但t.team_键实际上来自axios调用。为了简化，我省略了这部分代码。我的问题可能不清楚。更新。我不认为这部分代码是相关的，因为数组似乎正在获取数据，所以我假设

push

正在工作。我可以在我的vue开发工具中看到其中的数据。是的，这两个工具都有意义。根据zabusa的回答，我找到了一些有效的方法，但我也可以试试这些方法。

fetchTeams (url, token) {
  return this.axios.get(url, {
    params: {
      accessToken: token
    }
  })
}

mounted () {
  this.$nextTick(async _ => {
    var accessToken = this.$route.query.accessToken
    var response = await this.fetchTeams('myapiserver.com/teams', accessToken)
    var teams = response.data.teams[0].teams
    teams.forEach(t => {
      this.teamKeys.push(String(t.team_key))
    })
    this.fetchRosters(accessToken)
  })
}

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)
    })
},