方法和數據值無法訪問keydown listener Vue js

不確定this.index是什么，但我會假設它是一個道具或類似的東西。

嘗試從addEventListener中刪除關鍵字function。

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

它與問題沒有特別的關系，但也從數據中刪除function關鍵字：

data() {
    return {
      indexPictures: this.index,
    }
  },

關鍵字function更改范圍，意味著this綁定到函數本身（在您的例子中是回調）。當您使用箭頭函數this時，關鍵字將與mounted中的關鍵字相同，這意味著您可以訪問數據。

從MDN文檔：

使用Arrow函數的最大好處可能是使用setTimeout（）和EventTarget.prototype.addEventListener()等方法，這些方法通常需要某種閉包、調用、應用或綁定來確保函數在正確的范圍內執行。

請記住，如果這是組件的一部分，最好在銷毀組件之前刪除該偵聽器。