javascript - 如何在VueJS中修复 “this is undefined”？

我在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。

最佳答案

创建Vue实例后，Vue可以代理该实例上的数据，方法， Prop 和注入(inject)，以便于访问。代理方法使用Function.prototype.bind ..



但是，这在箭头函数上不起作用，因为它们的范围无法绑定(bind)，并且它们继承其父级的范围。因此，根据您的情况，解决方案是改用普通函数，以便this范围可以正确绑定(bind)到Vue实例。

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