Vue.js中如何在forEach循环内访问this.variable变量？

你碰到的核心问题是普通函数作为forEach回调时，this的指向发生了改变——这里的this不再指向Vue组件实例，而是指向了全局对象（浏览器环境下是window），所以自然没法访问到this.names。下面给你三种常用的解决办法：

方法1：使用箭头函数（最推荐） #

箭头函数不会绑定自己的this，它会继承外层作用域的this，也就是Vue组件实例的this。修改你的forEach回调即可：

printNames: function () {
  let tempData = JSON.parse(JSON.stringify(this.nameData))
  tempData.biglist.forEach((nObj) => { // 这里改成箭头函数
    let cName = nObj.CeName
    console.log(cName)
    this.names = cName // 现在this就指向Vue实例了
  })
}

方法2：提前保存Vue实例的this #

在forEach之前把组件实例的this存到一个变量里（比如self或者vm），然后在回调里用这个变量访问实例属性：

printNames: function () {
  let self = this // 保存Vue实例的this
  let tempData = JSON.parse(JSON.stringify(this.nameData))
  tempData.biglist.forEach(function (nObj) {
    let cName = nObj.CeName
    console.log(cName)
    self.names = cName // 用self代替this
  })
}

方法3：利用forEach的第二个参数指定this #

forEach方法本身支持第二个参数，用来指定回调函数执行时的this指向，直接传入组件实例的this就行：

printNames: function () {
  let tempData = JSON.parse(JSON.stringify(this.nameData))
  // 第二个参数传入this，指定回调里的this指向Vue实例
  tempData.biglist.forEach(function (nObj) {
    let cName = nObj.CeName
    console.log(cName)
    this.names = cName
  }, this)
}

额外提醒 #

你当前的代码里，每次循环都会把this.names覆盖成当前的cName，最后页面上只会显示最后一个名称。如果要展示所有名称，建议把names改成数组，比如：

// 初始化数据改成数组
var initData = { names: [] }

// 循环里push进去
this.names.push(cName)

// 模板里可以这样展示
<li>{{ names.join(', ') }}</li>

内容的提问来源于stack exchange，提问作者Mik_A