如何在VueJS中修复“这是未定义的”？

Question

我已经在VueJS中创建了一个新组件并定义了两个方法。 一种方法是action（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();
  }
}