javascript - property - Usar la función de flecha en vue computed no funciona

vue mounted

Question

Estoy aprendiendo Vue y enfrentando un problema mientras uso la función de flecha en una propiedad computada.

Mi código original funciona bien (vea 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>

Sin embargo, después de cambiar los métodos en la propiedad calculada, el color no cambiará (aunque el valor de turnRed todavía 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 la sintaxis incorrecta?

Answer 1

¿Y por qué no algo más sencillo como este?

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>

Answer 2

Cuando creas computado no usas => , solo debes usar switchRed () {...

Echa un vistazo a un fragmento. Funciona como debería.

Se aplica a todos los computadores, métodos, observadores, 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>

Answer 3

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

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

Answer 4

Se enfrenta a este error porque una función de flecha no lo vincularía a la instancia de vue para la que está definiendo la propiedad calculada. Lo mismo sucedería si tuviera que definir methods utilizando una función de flecha.

No use las 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 este. this.myMethod no estará definido.

Puedes leer sobre esto here .