Question

我在Vuejs组件的methods部分中使用lambda表达式。

示例如下我触发alertyou()并收到警报，点击“确定”。然后在vue开发人员工具中，我看到this.activated变为true。

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      activated: false
    }
  },
  methods: {
      alertme: () => { alert('Clicked'); this.activated = false; },
      alertyou() {
        alert('Alert You');
        this.activated = true
      }
  }
}

然而，当我点击触发alertme lambda的按钮时。我收到提醒信息，点击“确定”。但是这个.activated仍然是真的！

这里发生的是lambdas的限制吗？你能每个lambda只触发一个语句吗？或者，一旦发出警报，这是否必须处理范围？

Answer 1

这里发生的是lambdas的限制吗？你能每个lambda只触发一个语句吗？或者，一旦发出警报，这是否必须处理范围？

它既不是。

箭头函数将this绑定到创建箭头函数时的上下文。在这种情况下，this不是vue实例。它可能是window

使用function关键字（或ES6对象速记样式）在对象上声明的函数通常会将this绑定到声明函数的对象。

这就是为什么您可以访问this.activated上的alertyou而不是alertme

您需要使用与alertyou相同的语法来声明alertme方法。

Answer 2

将alertme: () => { alert('Clicked'); this.activated = false; }更改为alertme() { alert('Clicked'); this.activated = false; }。您可以看到一个有效的示例here

Vuejs Arrow函数不触发第二个语句

2 个答案: