如何在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();
  }
}