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

Use arrow function in vue computed does not work

提问by PJCHENder

I am learning Vue and facing a problem while using arrow function in computed property.

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

My original code works fine (See snippet below).

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

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>

However, after I change methods in computed property, the color will not change (though the turnRed value still switch between true and false successfully).

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

This is my code:

这是我的代码：

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

Do I use the wrong syntax ?

我使用了错误的语法吗？

回答by Amresh Venugopal

You are facing this error because an arrow function wouldn't bind thisto the vue instance for which you are defining the computed property. The same would happen if you were to define methodsusing an arrow function.

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

Don't use arrow functions on an instance property or callback (e.g. vm.$watch('a', newVal => this.myMethod())). As arrow functions are bound to the parent context, this will not be the Vue instance as you'd expect and this.myMethodwill be undefined.

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

You can read about it here.

你可以在这里阅读它。

回答by throrin19

The arrow function lost the Vue component context. For your functions in methods, computed, watch, etc., use the Object functions:

箭头函数丢失了 Vue 组件上下文。为了您的功能methods，computed，watch等，使用对象的功能：

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

回答by Marek Urbanowicz

When creating computed you do not use =>, you should just use switchRed () {...

在创建您不使用的计算时=>，您应该只使用switchRed () {...

Take a look at snippet. Works as it should.

看一下片段。正常工作。

It applies to all computed,method, watchers etc.

它适用于所有计算、方法、观察者等。

new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  computed:{
   switchRed () {
     return {red: this.turnRed}
    },
    switchGreen () {
     return {green: this.turnGreen}
    },
    switchBlue () {
     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>

回答by Soldeplata Saketos

And why not something simpler like this?

为什么不是像这样更简单的东西？

new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  methods:{
   toggle (color) {
     this[`turn${color}`] = !this[`turn${color}`];
    }
  }
});

.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="toggle('Red')" :class="{red:turnRed}"></div>
  <div class="demo" @click="toggle('Green')" :class="{green: turnGreen}"></div>
  <div class="demo" @click="toggle('Blue')" :class="{blue: turnBlue}"></div>
</div>