在 vue 计算中使用箭头函数不起作用

Question

我正在学习 Vue 并在计算属性中使用箭头函数时遇到问题。

我的原始代码工作正常（见下面的片段）。

 new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  computed:{
  	switchRed: function () {
    	return {red: this.turnRed}
    },
    switchGreen: function () {
    	return {green: this.turnGreen}
    },
    switchBlue: function () {
    	return {blue: this.turnBlue}
    }
  }
});

 .demo{
  width: 100px;
  height: 100px;
  background-color: gray;
  display: inline-block;
  margin: 10px;
}
.red{
  background-color: red;
}
.green{
  background-color: green;
}
.blue{
  background-color: blue;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<div id="app">
  <div class="demo" @click="turnRed = !turnRed" :class="switchRed"></div>
  <div class="demo" @click="turnGreen = !turnGreen" :class="switchGreen"></div>
  <div class="demo" @click="turnBlue = !turnBlue" :class="switchBlue"></div>
</div>

但是，在我更改计算属性中的方法后，颜色不会改变（尽管 turnRed 值仍然在 true 和 false 之间成功切换）。

这是我的代码：

 computed:{
    switchRed: () => {
        return {red: this.turnRed}
    },
    switchGreen: () => {
        return {green: this.turnGreen}
    },
    switchBlue: () => {
        return {blue: this.turnBlue}
    }
}

我使用了错误的语法吗？

原文由 PJCHENder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您正面临此错误，因为箭头函数不会将 this 绑定到您为其定义计算属性的 vue 实例。如果您要使用箭头函数定义 methods ，也会发生同样的情况。

不要在实例属性或回调上使用箭头函数（例如 vm.$watch('a', newVal => this.myMethod())) 。由于箭头函数绑定到父上下文，这不会是您期望的 Vue 实例和 this.myMethod 将是未定义的。

你可以 在这里 阅读。

原文由 Amresh Venugopal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

箭头函数丢失了 Vue 组件上下文。对于 methods 、 computed 、 watch 等中的函数，请使用对象函数：

 computed:{
    switchRed() {
        return {red: this.turnRed}
    },
    switchGreen() {
        return {green: this.turnGreen}
    },
    switchBlue() {
        return {blue: this.turnBlue}
    }
}

原文由 throrin19 发布，翻译遵循 CC BY-SA 4.0 许可协议