无法循环遍历vue单文件组件中的数组答案

【问题标题】：Can't loop through array in vue single file component无法循环遍历vue单文件组件中的数组
【发布时间】：2018-05-30 11:34:39
【问题描述】：

我有一个使用单文件组件制作的 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

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

【问题讨论】：

为什么要用 JSON.stringifying 数组？
我不知道，我试图诊断问题。我猜你做不到？
什么是console.log(this.teamKeys.length)
嗯，它的 0 出于某种原因。这没有任何意义，因为如果我之前执行console.log(this.teamKeys)，它会在控制台中显示length: 2。
你正在运行一个异步任务，这就是为什么它在需要时没有获得 teamKeys

标签： javascript arrays vue.js

【解决方案1】：

我认为你在第三次 sn-p 结束时错过了“)”

【讨论】：

你是对的，谢谢（已修复），但在我的实际代码中是正确的

【解决方案2】：

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

或者：

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

【讨论】：

是的，这看起来像是一个错误，但 t.team_key 实际上来自 axios 调用。为了简化这里，我把那部分代码去掉了。我的问题可能不清楚。
已更新。我不认为这部分代码是相关的，因为数组似乎正在获取数据，所以我认为 push 正在工作。我可以在我的 vue 开发者工具中看到其中的数据。
是的，这两个都有道理。根据 zabusa 的回答，我有一些工作，但也可以尝试这些。

【解决方案3】：

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

【讨论】：