时间戳

首页 > 解决方案 > 如何在 VueJS 中修复“这是未定义的”？

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

问题描述

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

标签： javascriptvue.jsmethods

解决方案

当创建 Vue 实例时，Vue 代理实例上的数据、方法、道具和注入，以便于访问。为了代理方法，它使用Function.prototype.bind ..

该bind()方法创建一个新函数，在调用该函数时，其 this关键字设置为提供的值

但是，这不适用于箭头函数，因为它们的范围无法绑定并且它们继承了父级的范围。因此，您的解决方案是改用普通函数，以便它的this范围可以正确绑定到 Vue 实例。

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

推荐阅读