Usar la función de flecha en vue calculado no funciona

Estoy aprendiendo Vue y me enfrento a un problema al utilizar la función de flecha en la propiedad calculada.

Mi código original funciona bien (consulte el fragmento a continuación).

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>

Expandir fragmento

Sin embargo, después de cambiar los métodos en la propiedad calculada, el color no cambiará (aunque el valor de turnRed aún cambia entre verdadero y falso con éxito).

Este es mi código:

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

¿Utilizo una sintaxis incorrecta?

Mar 23 '17 15:03 PJCHENder

Te enfrentas a este error porque una función de flecha no se vincula thisa la instancia de vue para la que estás definiendo la propiedad calculada. Lo mismo sucedería si definiera methodsusando una función de flecha.

No utilice funciones de flecha en una propiedad de instancia o devolución de llamada (por ejemplo vm.$watch('a', newVal => this.myMethod())), como las funciones de flecha están vinculadas al contexto principal, esta no será la instancia de Vue como se esperaría y this.myMethodno estará definida.

Usted puede leer sobre ello aquí .

Mar 23 '2017 08:03 Amresh Venugopal

La función de flecha perdió el contexto del componente Vue. Para sus funciones en methods, computed, watch, etc., utilice las funciones de Objeto:

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

Mar 23 '2017 08:03 throrin19