如何在VueJS中修復“這是未定義的”？

Question

我在VueJS中創建了一個新組件並定義了兩個方法。 一種方法是動作（vuex），另一種方法是常規方法。

actionTypes.js

const TOGGLE_PREVIEW = 'togglePreview';

零件

method: {
  ...mapActions([actionTypes.TOGGLE_PREVIEW]),
  onClickPreview: () => {
    this.togglePreview();
  }

它出錯了; Uncaught TypeError: Cannot read property 'togglePreview' of undefined 。

Answer 1

創建Vue實例時，Vue會在實例上代理數據，方法，道具和注入，以便於訪問。 要代理方法，它使用Function.prototype.bind ..

bind()方法創建一個新函數，在調用時，將其this關鍵字設置為提供的值

但是這對箭頭函數不起作用，因為它們的作用域不能被綁定，並且它們繼承了它們的父作用域。 因此，在您的情況下，解決方案是使用普通函數，以便可以this范圍正確綁定到Vue實例。

methods: {
  ...mapActions([actionTypes.TOGGLE_PREVIEW]),
  onClickPreview() {
    this.togglePreview();
  }
}