Estoy aprendiendo Vue y me enfrento a un problema al usar la función de flecha en la propiedad calculada.
Mi código original funciona bien (ver 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 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} } }¿Uso la sintaxis incorrecta?
Se enfrenta a este error porque una función de flecha no vincularía this 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 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 cabría esperar ythis.myMethodno estará definido.
Puedes leer sobre esto aquí .
La función de flecha perdió el contexto del componente Vue. Para sus funciones en methods , computed , watch , etc., use las funciones de Objeto:
computed:{ switchRed() { return {red: this.turnRed} }, switchGreen() { return {green: this.turnGreen} }, switchBlue() { return {blue: this.turnBlue} } }Puede lograr esto deconstruyendo lo que quiere de esto:
computed:{ switchRed: ({ turnRed }) => {red: turnRed}, switchGreen: ({ turnGreen }) => {green: turnGreen}, switchBlue: ({ turnBlue }) => {blue: turnBlue} }