However, after I change methods in computed property, the color will not change (though the turnRed value still switch between true and false successfully). 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 ?","url":"https://ednsquare.com/question/arrow-function-in-vue-computed-does-not-working------0oWRLD","mainEntityOfPage":"https://ednsquare.com/question/arrow-function-in-vue-computed-does-not-working------0oWRLD","image":{"@type":"ImageObject","url":"https://cdn.ednsquare.com/s/*/d8e61c58-683f-4521-8ed9-7b873747514b.png"},"answerCount":1,"upvoteCount":7,"dateCreated":"2019-06-13T20:21:19.000Z","author":{"@type":"Person","name":"Aditya Agrawal","image":"https://cdn.ednsquare.com/s/*/212a3510-ddb5-4aa4-8953-fb98c306dc6c.jpeg","url":"https://ednsquare.com/@aditya"},"acceptedAnswer":{"@type":"Answer","text":"You are facing this error because an arrow function wouldn't bind this to the vue instance for which you are defining the computed property. The same would happen if you were to define methodsusing an arrow function. 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.myMethod will be undefined. You can read about it here. use the Object functions : computed:{ switchRed() { return {red: this.turnRed} }, switchGreen() { return {green: this.turnGreen} }, switchBlue() { return {blue: this.turnBlue} } }","dateCreated":"2019-06-13T20:22:51.000Z","upvoteCount":3,"url":"https://ednsquare.com/question/thread/b73d6514-21a1-4776-9f40-5107514b43e7","author":{"@type":"Person","name":"Prasad Patil","image":"https://cdn.ednsquare.com/s/*/f89a1717-2322-4d93-87a4-aba26711217e.jpeg","url":"https://ednsquare.com/@prasad"}},"suggestedAnswer":[]}}Ednsquare

Arrow function in vue computed does not working

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

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).

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 ?

Write your answer...

Never miss a post from Aditya Agrawal, when you sign up for Ednsquare.