Vue.js中Data值及Methods无法访问keydown监听器问题求助

你遇到的问题本质是函数内的this指向错误——在addEventListener的回调函数里，普通function的this指向的是触发事件的document对象，而非Vue组件实例，所以拿不到data里的indexPictures，调用methods时也会提示不存在。以下是几种可行的解决方法：

方法1：使用箭头函数绑定this #

箭头函数不会创建独立的this上下文，会直接继承外层作用域的this（也就是Vue组件实例）：

mounted () {
  document.addEventListener('keydown', (e) => {
    switch (e.keyCode) {
      case 37 :
        alert(this.indexPictures)
        break
    }
  })
}

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

在回调函数外部，把Vue实例的this存为变量（比如vm），回调里用这个变量访问实例属性/方法：

mounted () {
  const vm = this
  document.addEventListener('keydown', function (e) {
    switch (e.keyCode) {
      case 37 :
        alert(vm.indexPictures)
        break
    }
  })
}

方法3：用bind手动绑定this #

给回调函数手动绑定Vue实例的this，强制改变其指向：

mounted () {
  document.addEventListener('keydown', function (e) {
    switch (e.keyCode) {
      case 37 :
        alert(this.indexPictures)
        break
    }
  }.bind(this))
}

额外注意：清理事件监听避免内存泄漏 #

组件销毁时记得移除绑定的事件监听，防止内存泄漏。如果用了箭头函数或bind，需要提前把回调函数存为实例属性，否则移除时找不到对应函数：

mounted () {
  this.keydownHandler = (e) => {
    switch (e.keyCode) {
      case 37 :
        alert(this.indexPictures)
        break
    }
  }
  document.addEventListener('keydown', this.keydownHandler)
},
beforeDestroy () {
  document.removeEventListener('keydown', this.keydownHandler)
}

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